diff --git a/public/html/404.html b/public/html/404.html
index 4c0fe14..e8cd07e 100644
--- a/public/html/404.html
+++ b/public/html/404.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -561,7 +561,7 @@
       <div class="container pt-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="lg:w-9/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-            <figure class="!mb-10"><img class="max-w-full h-auto" src="assets/img/illustrations/404.png" alt="image"></figure>
+            <figure class="!mb-10"><img class="max-w-full h-auto" src="../assets/img/illustrations/404.png" alt="image"></figure>
           </div>
           <!-- /column -->
           <div class="lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
@@ -583,7 +583,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -661,8 +661,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/README.md b/public/html/README.md
index 56d492e..170fa62 100644
--- a/public/html/README.md
+++ b/public/html/README.md
@@ -185,10 +185,10 @@ HTML dosyasının `<head>` bölümünde renk şemasını değiştirebilirsiniz:
 
 ```html
 <!-- Mevcut -->
-<link rel="stylesheet" href="assets/css/colors/grape.css">
+<link rel="stylesheet" href="../assets/css/colors/grape.css">
 
 <!-- Yeni renk şeması -->
-<link rel="stylesheet" href="assets/css/colors/aqua.css">
+<link rel="stylesheet" href="../assets/css/colors/aqua.css">
 ```
 
 ## 🔤 Yazı Tipleri
@@ -206,10 +206,10 @@ HTML dosyasının `<head>` bölümünde yazı tipini değiştirebilirsiniz:
 
 ```html
 <!-- Mevcut -->
-<link rel="stylesheet" type="text/css" href="assets/css/fonts/space.css">
+<link rel="stylesheet" type="text/css" href="../assets/css/fonts/space.css">
 
 <!-- Yeni yazı tipi -->
-<link rel="stylesheet" type="text/css" href="assets/css/fonts/thicccboi.css">
+<link rel="stylesheet" type="text/css" href="../assets/css/fonts/thicccboi.css">
 ```
 
 Ve `<body>` etiketine font sınıfı ekleyin:
@@ -309,14 +309,14 @@ Detaylı dokümantasyon için:
 
 ```html
 <a href='index.html'>
-  <img src="assets/img/logo-dark.png" alt="Logo">
+  <img src="../assets/img/logo-dark.png" alt="Logo">
 </a>
 ```
 
 ### Favicon Değiştirme
 
 ```html
-<link rel="shortcut icon" href="assets/img/favicon.png">
+<link rel="shortcut icon" href="../assets/img/favicon.png">
 ```
 
 ### Meta Bilgileri
diff --git a/public/html/about.html b/public/html/about.html
index 4233694..398e2d8 100644
--- a/public/html/about.html
+++ b/public/html/about.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -569,7 +569,7 @@
         <!-- /.row -->
       </div>
       <!-- /.container -->
-      <figure class="absoute" style="bottom: 0; left: 0; z-index: 2;"><img src="assets/img/photos/bg12.jpg" alt="image"></figure>
+      <figure class="absoute" style="bottom: 0; left: 0; z-index: 2;"><img src="../assets/img/photos/bg12.jpg" alt="image"></figure>
     </section>
     <!-- /section -->
     <section class="wrapper !bg-[#ffffff]  angled upper-end lower-end relative border-0 before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#fefefe] before:content-[''] before:block before:absolute before:z-0 before:!border-y-transparent before:border-0 before:border-solid before:right-0 after:bottom-[-4rem] after:border-l-transparent after:border-r-[100vw] after:border-b-[4rem] after:border-[#fefefe] after:content-[''] after:block after:absolute after:z-0 after:!border-y-transparent after:border-0 after:border-solid after:right-0">
@@ -579,10 +579,10 @@
             <div class="shape bg-dot primary bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] rellax !w-[6rem] !h-[10rem] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: 3rem; left: 5.5rem"></div>
             <div class="flex flex-wrap !relative overlap-grid-2">
               <div class="item xl:w-[70%] xl:z-[3] xl:ml-[30%] xl:!mt-0 lg:w-[70%] lg:z-[3] lg:ml-[30%] lg:!mt-0 md:w-[70%] md:z-[3] md:ml-[30%] md:!mt-0">
-                <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative"><img class="!rounded-[.4rem] " src="assets/img/photos/about2.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative"><img class="!rounded-[.4rem] " src="../assets/img/photos/about2.jpg" alt="image"></figure>
               </div>
               <div class="item xl:w-[55%] xl:!mt-[-45%] xl:z-[4] xl:ml-0 lg:w-[55%] lg:!mt-[-45%] lg:z-[4] lg:ml-0 md:w-[55%] md:!mt-[-45%] md:z-[4] md:ml-0">
-                <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative"><img class="!rounded-[.4rem] " src="assets/img/photos/about3.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative"><img class="!rounded-[.4rem] " src="../assets/img/photos/about3.jpg" alt="image"></figure>
               </div>
             </div>
           </div>
@@ -689,7 +689,7 @@
         <div class="flex flex-wrap mx-[-15px] lg:mx-[-20px] xl:mx-0 items-center">
           <div class="md:w-5/12 lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] lg:!px-[20px] xl:px-0 max-w-full xl:!ml-[8.33333333%] max-lg:!hidden xl:!flex lg:!flex !relative !self-end">
             <div class="shape !rounded-[50%] !bg-[#e0e9fa] rellax !w-[12.5rem] !h-[12.5rem] hidden xl:block lg:block z-[1] absolute" data-rellax-speed="1" style="top: 7rem; left: 1rem"></div>
-            <figure class=" relative z-[2]"><img class="w-full max-w-full !h-auto" src="assets/img/photos/co1.png" alt="image"></figure>
+            <figure class=" relative z-[2]"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/co1.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="md:w-7/12 lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] lg:!px-[20px] xl:px-0 max-w-full xl:!ml-[8.33333333%]">
@@ -766,7 +766,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te1.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te1.jpg" alt="image">
                         <h4 class="!mb-1">Coriss Ambady</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Financial Analyst</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -788,7 +788,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te2.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te2.jpg" alt="image">
                         <h4 class="!mb-1">Cory Zamora</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Marketing Specialist</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -810,7 +810,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te3.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te3.jpg" alt="image">
                         <h4 class="!mb-1">Nikolas Brooten</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Sales Manager</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -832,7 +832,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te4.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te4.jpg" alt="image">
                         <h4 class="!mb-1">Jackie Sanders</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Investment Planner</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -854,7 +854,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te5.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te5.jpg" alt="image">
                         <h4 class="!mb-1">Laura Widerski</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Sales Specialist</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -876,7 +876,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te6.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te6.jpg" alt="image">
                         <h4 class="!mb-1">Tina Geller</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Financial Analyst</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -950,7 +950,7 @@
         <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center">
           <div class="md:w-8/12 lg:w-6/12 xl:w-5/12 lg:!ml-0 xl:!ml-[8.33333333%] w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full !relative">
             <div class="shape bg-dot primary rellax !w-[7rem] !h-[12.5rem] !bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -2rem; left: -1.4rem;"></div>
-            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem] w-full max-w-full !h-auto" src="assets/img/photos/about4.jpg" alt="image"></figure>
+            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem] w-full max-w-full !h-auto" src="../assets/img/photos/about4.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -999,7 +999,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1076,8 +1076,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/about2.html b/public/html/about2.html
index b4f75bb..e793e66 100644
--- a/public/html/about2.html
+++ b/public/html/about2.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -575,7 +575,7 @@
       <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
         <div class="flex flex-wrap mx-[-15px] !text-center !mb-14 xl:!mb-20 lg:!mb-20 md:!mb-20">
           <div class="md:w-10/12 lg:w-8/12 xl:w-8/12 w-full md:!ml-[8.33333333%] lg:!ml-[16.66666667%] xl:!ml-[16.66666667%] flex-[0_0_auto] !px-[15px] max-w-full !mt-[-8rem] xl:!mt-[-15rem] lg:!mt-[-15rem] md:!mt-[-15rem]">
-            <figure class="m-0 p-0"><img class="!w-auto" src="assets/img/illustrations/i8.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="!w-auto" src="../assets/img/illustrations/i8.png" alt="image"></figure>
           </div>
           <!-- /column -->
         </div>
@@ -645,7 +645,7 @@
       <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-24 lg:!mb-24 md:!mb-24 items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i3.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i3.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -684,7 +684,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i2.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i2.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -758,7 +758,7 @@
               <div class="swiper">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide">
-                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t1.jpg" alt="image">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t1.jpg" alt="image">
                     <h4 class="!mb-1">Cory Zamora</h4>
                     <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Marketing Specialist</div>
                     <p class="!mb-2">Etiam porta sem magna malesuada mollis.</p>
@@ -771,7 +771,7 @@
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
-                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t2.jpg" alt="image">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t2.jpg" alt="image">
                     <h4 class="!mb-1">Coriss Ambady</h4>
                     <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Financial Analyst</div>
                     <p class="!mb-2">Aenean eu leo quam. Pellentesque ornare lacinia.</p>
@@ -784,7 +784,7 @@
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
-                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t3.jpg" alt="image">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t3.jpg" alt="image">
                     <h4 class="!mb-1">Nikolas Brooten</h4>
                     <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Sales Manager</div>
                     <p class="!mb-2">Donec ornare elit quam porta gravida at eget.</p>
@@ -797,7 +797,7 @@
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
-                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t4.jpg" alt="image">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t4.jpg" alt="image">
                     <h4 class="!mb-1">Jackie Sanders</h4>
                     <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Investment Planner</div>
                     <p class="!mb-2">Nullam risus eget urna mollis ornare vel eu leo.</p>
@@ -810,7 +810,7 @@
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
-                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t5.jpg" alt="image">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t5.jpg" alt="image">
                     <h4 class="!mb-1">Tina Geller</h4>
                     <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Assistant Buyer</div>
                     <p class="!mb-2">Vivamus sagittis lacus vel augue laoreet rutrum.</p>
@@ -840,7 +840,7 @@
       <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] !mb-20 items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[70px] max-w-full xl:!order-2 lg:!order-2">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i4.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i4.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[70px] max-w-full xl:!mt-[4.5rem] lg:!mt-[4.5rem]">
@@ -896,27 +896,27 @@
         <div class="xl:!px-5 lg:!px-5">
           <div class="flex flex-wrap mx-0 md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-40px] items-center">
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c1.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c1.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c2.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c2.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c3.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c3.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c4.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c4.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c5.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c5.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c6.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c6.png" alt="image"></figure>
             </div>
             <!--/column -->
           </div>
@@ -931,7 +931,7 @@
       <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i5.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i5.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -979,7 +979,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1056,8 +1056,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/blog-post.html b/public/html/blog-post.html
index 84862a0..c41076a 100644
--- a/public/html/blog-post.html
+++ b/public/html/blog-post.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -593,7 +593,7 @@
           <div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
             <div class="blog single !mt-[-7rem]">
               <div class="card">
-                <figure class="card-img-top"><img src="assets/img/photos/b1.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img src="../assets/img/photos/b1.jpg" alt="image"></figure>
                 <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
                   <div class="classic-view">
                     <article class="post !mb-8">
@@ -603,19 +603,19 @@
                         <p>Donec sed odio dui consectetur adipiscing elit. Etiam adipiscing tincidunt elit, eu convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero, condimentum ac laoreet vitae, varius tempor nisi. Duis non arcu vel lectus urna mollis ornare vel eu leo.</p>
                         <div class="flex flex-wrap mx-[-15px] !mt-3 !mb-10">
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b8-full.jpg" data-glightbox="title: Heading; description: Purus Vulputate Sem Tellus Quam" data-gallery="post"> <img src="assets/img/photos/b8.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b8-full.jpg" data-glightbox="title: Heading; description: Purus Vulputate Sem Tellus Quam" data-gallery="post"> <img src="../assets/img/photos/b8.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b9-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b9.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b9-full.jpg" data-glightbox data-gallery="post"> <img src="../assets/img/photos/b9.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b10-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b10.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b10-full.jpg" data-glightbox data-gallery="post"> <img src="../assets/img/photos/b10.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b11-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b11.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b11-full.jpg" data-glightbox data-gallery="post"> <img src="../assets/img/photos/b11.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                         </div>
@@ -660,7 +660,7 @@
                   <hr>
                   <div class="author-info xl:!flex lg:!flex md:!flex items-center !mb-3">
                     <div class="flex items-center">
-                      <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u5.jpg"></figure>
+                      <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u5.jpg"></figure>
                       <div>
                         <h6><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                         <span class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none">Sales Manager</span>
@@ -688,7 +688,7 @@
                       <div class="swiper-wrapper">
                         <div class="swiper-slide">
                           <article>
-                        <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                        <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                           <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                             <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                           </figcaption>
@@ -715,7 +715,7 @@
                         <!--/.swiper-slide -->
                         <div class="swiper-slide">
                           <article>
-                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                               <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                 <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                               </figcaption>
@@ -742,7 +742,7 @@
                         <!--/.swiper-slide -->
                         <div class="swiper-slide">
                           <article>
-                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                               <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                 <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                               </figcaption>
@@ -769,7 +769,7 @@
                         <!--/.swiper-slide -->
                         <div class="swiper-slide">
                           <article>
-                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b7.jpg" alt="image"></a>
                               <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                 <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                               </figcaption>
@@ -806,7 +806,7 @@
                       <li class="comment !mt-8">
                         <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                           <div class="flex items-center">
-                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u1.jpg"></figure>
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u1.jpg"></figure>
                             <div>
                               <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Connor Gibson</a></h6>
                               <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -828,7 +828,7 @@
                       <li class="comment !mt-8">
                         <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                           <div class="flex items-center">
-                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u2.jpg"></figure>
                             <div>
                               <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                               <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -850,7 +850,7 @@
                           <li class="comment !mt-8">
                             <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                               <div class="flex items-center">
-                                <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u3.jpg"></figure>
+                                <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u3.jpg"></figure>
                                 <div>
                                   <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Pearce Frye</a></h6>
                                   <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -872,7 +872,7 @@
                               <li class="comment !mt-8">
                                 <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                                   <div class="flex items-center">
-                                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u2.jpg"></figure>
                                     <div>
                                       <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                                       <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -898,7 +898,7 @@
                       <li class="comment !mt-8">
                         <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                           <div class="flex items-center">
-                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u4.jpg"></figure>
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u4.jpg"></figure>
                             <div>
                               <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Lou Bloxham</a></h6>
                               <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -964,7 +964,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1041,8 +1041,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/blog-post2.html b/public/html/blog-post2.html
index 25c96d4..f4b0d40 100644
--- a/public/html/blog-post2.html
+++ b/public/html/blog-post2.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,8 +24,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+              <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+              <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -42,205 +42,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -354,87 +354,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -561,7 +561,7 @@
       <!-- /.offcanvas -->
     </header>
     <!-- /header -->
-    <section class="wrapper image-wrapper bg-image bg-overlay !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="assets/img/photos/bg5.jpg">
+    <section class="wrapper image-wrapper bg-image bg-overlay !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="../assets/img/photos/bg5.jpg">
       <div class="container pt-32 pb-20 xl:pt-40 lg:pt-40 md:pt-40 xl:pb-36 lg:pb-36 md:pb-36 !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="md:w-10/12 lg:w-10/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -594,7 +594,7 @@
           <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
             <div class="blog single">
               <div class="card">
-                <figure class="card-img-top"><img src="assets/img/photos/b1.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img src="../assets/img/photos/b1.jpg" alt="image"></figure>
                 <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
                   <div class="classic-view">
                     <article class="post !mb-8">
@@ -604,19 +604,19 @@
                         <p>Donec sed odio dui consectetur adipiscing elit. Etiam adipiscing tincidunt elit, eu convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero, condimentum ac laoreet vitae, varius tempor nisi. Duis non arcu vel lectus urna mollis ornare vel eu leo.</p>
                         <div class="flex flex-wrap mx-[-15px] !mt-3 !mb-10">
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b8-full.jpg" data-glightbox="title: Heading; description: Purus Vulputate Sem Tellus Quam" data-gallery="post"> <img src="assets/img/photos/b8.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b8-full.jpg" data-glightbox="title: Heading; description: Purus Vulputate Sem Tellus Quam" data-gallery="post"> <img src="../assets/img/photos/b8.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b9-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b9.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b9-full.jpg" data-glightbox data-gallery="post"> <img src="../assets/img/photos/b9.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b10-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b10.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b10-full.jpg" data-glightbox data-gallery="post"> <img src="../assets/img/photos/b10.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b11-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b11.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b11-full.jpg" data-glightbox data-gallery="post"> <img src="../assets/img/photos/b11.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                         </div>
@@ -661,7 +661,7 @@
                   <hr>
                   <div class="author-info xl:!flex lg:!flex md:!flex items-center !mb-3">
                     <div class="flex items-center">
-                      <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u5.jpg"></figure>
+                      <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u5.jpg"></figure>
                       <div>
                         <h6><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                         <span class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none">Sales Manager</span>
@@ -689,7 +689,7 @@
                       <div class="swiper-wrapper">
                         <div class="swiper-slide">
                           <article>
-                        <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                        <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                           <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                             <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                           </figcaption>
@@ -716,7 +716,7 @@
                         <!--/.swiper-slide -->
                         <div class="swiper-slide">
                           <article>
-                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                               <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                 <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                               </figcaption>
@@ -743,7 +743,7 @@
                         <!--/.swiper-slide -->
                         <div class="swiper-slide">
                           <article>
-                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                               <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                 <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                               </figcaption>
@@ -770,7 +770,7 @@
                         <!--/.swiper-slide -->
                         <div class="swiper-slide">
                           <article>
-                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b7.jpg" alt="image"></a>
                               <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                 <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                               </figcaption>
@@ -807,7 +807,7 @@
                       <li class="comment !mt-8">
                         <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                           <div class="flex items-center">
-                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u1.jpg"></figure>
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u1.jpg"></figure>
                             <div>
                               <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Connor Gibson</a></h6>
                               <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -829,7 +829,7 @@
                       <li class="comment !mt-8">
                         <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                           <div class="flex items-center">
-                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u2.jpg"></figure>
                             <div>
                               <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                               <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -851,7 +851,7 @@
                           <li class="comment !mt-8">
                             <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                               <div class="flex items-center">
-                                <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u3.jpg"></figure>
+                                <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u3.jpg"></figure>
                                 <div>
                                   <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Pearce Frye</a></h6>
                                   <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -873,7 +873,7 @@
                               <li class="comment !mt-8">
                                 <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                                   <div class="flex items-center">
-                                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u2.jpg"></figure>
                                     <div>
                                       <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                                       <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -899,7 +899,7 @@
                       <li class="comment !mt-8">
                         <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                           <div class="flex items-center">
-                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u4.jpg"></figure>
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u4.jpg"></figure>
                             <div>
                               <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Lou Bloxham</a></h6>
                               <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -979,7 +979,7 @@
               <h4 class="widget-title !mb-3">Popular Posts</h4>
               <ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
                 <li class=" clear-both block overflow-hidden">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a1.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a1.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Magna Mollis Ultricies</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -990,7 +990,7 @@
                   </div>
                 </li>
                 <li class=" clear-both block overflow-hidden !mt-4">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a2.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a2.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ornare Nullam Risus</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -1001,7 +1001,7 @@
                   </div>
                 </li>
                 <li class=" clear-both block overflow-hidden !mt-4">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a3.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a3.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Euismod Nullam Fusce</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -1067,7 +1067,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1144,8 +1144,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/blog-post3.html b/public/html/blog-post3.html
index f2f0556..31163a3 100644
--- a/public/html/blog-post3.html
+++ b/public/html/blog-post3.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,8 +24,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+              <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+              <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -42,205 +42,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -354,87 +354,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -561,7 +561,7 @@
       <!-- /.offcanvas -->
     </header>
     <!-- /header -->
-    <section class="wrapper image-wrapper bg-image bg-overlay !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="assets/img/photos/bg5.jpg">
+    <section class="wrapper image-wrapper bg-image bg-overlay !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="../assets/img/photos/bg5.jpg">
       <div class="container pt-32 pb-20 xl:pt-40 lg:pt-40 md:pt-40 xl:pb-36 lg:pb-36 md:pb-36 !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="md:w-10/12 lg:w-10/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -594,7 +594,7 @@
           <div class="xl:w-8/12 lg:w-8/12 w-ful flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full xl:order-2 lg:order-2">
             <div class="blog single">
               <div class="card">
-                <figure class="card-img-top"><img src="assets/img/photos/b1.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img src="../assets/img/photos/b1.jpg" alt="image"></figure>
                 <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
                   <div class="classic-view">
                     <article class="post !mb-8">
@@ -604,19 +604,19 @@
                         <p>Donec sed odio dui consectetur adipiscing elit. Etiam adipiscing tincidunt elit, eu convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero, condimentum ac laoreet vitae, varius tempor nisi. Duis non arcu vel lectus urna mollis ornare vel eu leo.</p>
                         <div class="flex flex-wrap mx-[-15px] !mt-3 !mb-10">
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b8-full.jpg" data-glightbox="title: Heading; description: Purus Vulputate Sem Tellus Quam" data-gallery="post"> <img src="assets/img/photos/b8.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b8-full.jpg" data-glightbox="title: Heading; description: Purus Vulputate Sem Tellus Quam" data-gallery="post"> <img src="../assets/img/photos/b8.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b9-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b9.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b9-full.jpg" data-glightbox data-gallery="post"> <img src="../assets/img/photos/b9.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b10-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b10.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b10-full.jpg" data-glightbox data-gallery="post"> <img src="../assets/img/photos/b10.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b11-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b11.jpg" alt="image"></a></figure>
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/b11-full.jpg" data-glightbox data-gallery="post"> <img src="../assets/img/photos/b11.jpg" alt="image"></a></figure>
                           </div>
                           <!--/column -->
                         </div>
@@ -661,7 +661,7 @@
                   <hr>
                   <div class="author-info xl:!flex lg:!flex md:!flex items-center !mb-3">
                     <div class="flex items-center">
-                      <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u5.jpg"></figure>
+                      <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u5.jpg"></figure>
                       <div>
                         <h6><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                         <span class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none">Sales Manager</span>
@@ -689,7 +689,7 @@
                       <div class="swiper-wrapper">
                         <div class="swiper-slide">
                           <article>
-                        <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                        <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                           <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                             <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                           </figcaption>
@@ -716,7 +716,7 @@
                         <!--/.swiper-slide -->
                         <div class="swiper-slide">
                           <article>
-                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                               <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                 <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                               </figcaption>
@@ -743,7 +743,7 @@
                         <!--/.swiper-slide -->
                         <div class="swiper-slide">
                           <article>
-                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                               <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                 <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                               </figcaption>
@@ -770,7 +770,7 @@
                         <!--/.swiper-slide -->
                         <div class="swiper-slide">
                           <article>
-                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b7.jpg" alt="image"></a>
                               <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                 <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                               </figcaption>
@@ -807,7 +807,7 @@
                       <li class="comment !mt-8">
                         <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                           <div class="flex items-center">
-                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u1.jpg"></figure>
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u1.jpg"></figure>
                             <div>
                               <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Connor Gibson</a></h6>
                               <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -829,7 +829,7 @@
                       <li class="comment !mt-8">
                         <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                           <div class="flex items-center">
-                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u2.jpg"></figure>
                             <div>
                               <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                               <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -851,7 +851,7 @@
                           <li class="comment !mt-8">
                             <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                               <div class="flex items-center">
-                                <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u3.jpg"></figure>
+                                <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u3.jpg"></figure>
                                 <div>
                                   <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Pearce Frye</a></h6>
                                   <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -873,7 +873,7 @@
                               <li class="comment !mt-8">
                                 <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                                   <div class="flex items-center">
-                                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u2.jpg"></figure>
                                     <div>
                                       <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                                       <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -899,7 +899,7 @@
                       <li class="comment !mt-8">
                         <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
                           <div class="flex items-center">
-                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u4.jpg"></figure>
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u4.jpg"></figure>
                             <div>
                               <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Lou Bloxham</a></h6>
                               <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -979,7 +979,7 @@
               <h4 class="widget-title !mb-3">Popular Posts</h4>
               <ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
                 <li class=" clear-both block overflow-hidden">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a1.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a1.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Magna Mollis Ultricies</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -990,7 +990,7 @@
                   </div>
                 </li>
                 <li class=" clear-both block overflow-hidden !mt-4">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a2.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a2.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ornare Nullam Risus</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -1001,7 +1001,7 @@
                   </div>
                 </li>
                 <li class=" clear-both block overflow-hidden !mt-4">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a3.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a3.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Euismod Nullam Fusce</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -1067,7 +1067,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1144,8 +1144,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/blog.html b/public/html/blog.html
index 722ae81..e4c2c07 100644
--- a/public/html/blog.html
+++ b/public/html/blog.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -581,7 +581,7 @@
             <div class="blog classic-view !mt-[-7rem]">
               <article class="post !mb-8">
                 <div class="card">
-                  <figure class="card-img-top overlay overlay-1 hover-scale group"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'><img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b1.jpg" alt="image"></a>
+                  <figure class="card-img-top overlay overlay-1 hover-scale group"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'><img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b1.jpg" alt="image"></a>
                     <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                     </figcaption>
@@ -621,8 +621,8 @@
                     <div class="swiper-container dots-over relative !z-10" data-margin="5" data-nav="true" data-dots="true">
                       <div class="swiper">
                         <div class="swiper-wrapper">
-                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b2.jpg" alt="image"></div>
-                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b3.jpg" alt="image"></div>
+                          <div class="swiper-slide"><img class="w-full h-auto" src="../assets/img/photos/b2.jpg" alt="image"></div>
+                          <div class="swiper-slide"><img class="w-full h-auto" src="../assets/img/photos/b3.jpg" alt="image"></div>
                         </div>
                         <!--/.swiper-wrapper -->
                       </div>
@@ -700,7 +700,7 @@
               <div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -735,7 +735,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -770,7 +770,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -805,7 +805,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b7.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -875,7 +875,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -952,8 +952,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/blog2.html b/public/html/blog2.html
index 6e5984c..18c47f6 100644
--- a/public/html/blog2.html
+++ b/public/html/blog2.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -584,7 +584,7 @@
             <div class="blog classic-view">
               <article class="post !mb-8">
                 <div class="card">
-                  <figure class="card-img-top overlay overlay-1 hover-scale group"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'><img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b1.jpg" alt="image"></a>
+                  <figure class="card-img-top overlay overlay-1 hover-scale group"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'><img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b1.jpg" alt="image"></a>
                     <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                     </figcaption>
@@ -624,8 +624,8 @@
                     <div class="swiper-container dots-over relative !z-10" data-margin="5" data-nav="true" data-dots="true">
                       <div class="swiper">
                         <div class="swiper-wrapper">
-                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b2.jpg" alt="image"></div>
-                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b3.jpg" alt="image"></div>
+                          <div class="swiper-slide"><img class="w-full h-auto" src="../assets/img/photos/b2.jpg" alt="image"></div>
+                          <div class="swiper-slide"><img class="w-full h-auto" src="../assets/img/photos/b3.jpg" alt="image"></div>
                         </div>
                         <!--/.swiper-wrapper -->
                       </div>
@@ -703,7 +703,7 @@
               <div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -738,7 +738,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -773,7 +773,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -808,7 +808,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b7.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -893,7 +893,7 @@
               <h4 class="widget-title !mb-3">Popular Posts</h4>
               <ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
                 <li class=" clear-both block overflow-hidden">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a1.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a1.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Magna Mollis Ultricies</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -904,7 +904,7 @@
                   </div>
                 </li>
                 <li class=" clear-both block overflow-hidden !mt-4">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a2.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a2.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ornare Nullam Risus</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -915,7 +915,7 @@
                   </div>
                 </li>
                 <li class=" clear-both block overflow-hidden !mt-4">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a3.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a3.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Euismod Nullam Fusce</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -981,7 +981,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1058,8 +1058,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/blog3.html b/public/html/blog3.html
index 1ac9c55..5495e23 100644
--- a/public/html/blog3.html
+++ b/public/html/blog3.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -584,7 +584,7 @@
             <div class="blog classic-view">
               <article class="post !mb-8">
                 <div class="card">
-                  <figure class="card-img-top overlay overlay-1 hover-scale group"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'><img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b1.jpg" alt="image"></a>
+                  <figure class="card-img-top overlay overlay-1 hover-scale group"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'><img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b1.jpg" alt="image"></a>
                     <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                     </figcaption>
@@ -624,8 +624,8 @@
                     <div class="swiper-container dots-over relative !z-10" data-margin="5" data-nav="true" data-dots="true">
                       <div class="swiper">
                         <div class="swiper-wrapper">
-                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b2.jpg" alt="image"></div>
-                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b3.jpg" alt="image"></div>
+                          <div class="swiper-slide"><img class="w-full h-auto" src="../assets/img/photos/b2.jpg" alt="image"></div>
+                          <div class="swiper-slide"><img class="w-full h-auto" src="../assets/img/photos/b3.jpg" alt="image"></div>
                         </div>
                         <!--/.swiper-wrapper -->
                       </div>
@@ -703,7 +703,7 @@
               <div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -738,7 +738,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -773,7 +773,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -808,7 +808,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card">
-                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b7.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -893,7 +893,7 @@
               <h4 class="widget-title !mb-3">Popular Posts</h4>
               <ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
                 <li class=" clear-both block overflow-hidden">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a1.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a1.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Magna Mollis Ultricies</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -904,7 +904,7 @@
                   </div>
                 </li>
                 <li class=" clear-both block overflow-hidden !mt-4">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a2.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a2.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ornare Nullam Risus</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -915,7 +915,7 @@
                   </div>
                 </li>
                 <li class=" clear-both block overflow-hidden !mt-4">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a3.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a3.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Euismod Nullam Fusce</a> </h6>
                     <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -981,7 +981,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1058,8 +1058,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/career-job.html b/public/html/career-job.html
index c0de5a2..48d0dd5 100644
--- a/public/html/career-job.html
+++ b/public/html/career-job.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -759,7 +759,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -836,8 +836,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/career.html b/public/html/career.html
index add8878..e7a569c 100644
--- a/public/html/career.html
+++ b/public/html/career.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
   <style>
     .accordion-wrapper .card-header button.collapsed {
@@ -33,7 +33,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -50,205 +50,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -362,87 +362,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -585,8 +585,8 @@
         <div class="flex flex-wrap mx-[-15px] !mb-[4.5rem]">
           <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[-8rem] md:!mt-[-10rem] xl:!mt-[-12.5rem] lg:!mt-[-12.5rem] !relative">
             <div class="shape bg-dot red rellax !w-[6rem] !h-[8rem] absolute z-[1] bg-[radial-gradient(#e2626b_2px,transparent_2.5px)] opacity-50" data-rellax-speed="1" style="top: 1rem; left: -3.2rem;"></div>
-            <div class="shape pale-primary !w-[9rem] !h-[9rem] rellax absolute z-[1]" data-rellax-speed="1" style="bottom: 2rem; right: -3rem;"><img src="assets/img/svg/hex.svg" class="svg-inject icon-svg !w-full !h-full" alt="image"></div>
-            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="assets/img/photos/about18.jpg" alt="image"></figure>
+            <div class="shape pale-primary !w-[9rem] !h-[9rem] rellax absolute z-[1]" data-rellax-speed="1" style="bottom: 2rem; right: -3rem;"><img src="../assets/img/svg/hex.svg" class="svg-inject icon-svg !w-full !h-full" alt="image"></div>
+            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="../assets/img/photos/about18.jpg" alt="image"></figure>
           </div>
           <!-- /column -->
         </div>
@@ -690,7 +690,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te1.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te1.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
                         <p class="!mb-0 text-[.85rem]">Financial Analyst</p>
@@ -710,7 +710,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te2.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te2.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
                         <p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
@@ -730,7 +730,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te3.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te3.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
                         <p class="!mb-0 text-[.85rem]">Sales Manager</p>
@@ -750,7 +750,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te4.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te4.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
                         <p class="!mb-0 text-[.85rem]">Financial Analyst</p>
@@ -770,7 +770,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te5.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te5.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Jackie Sanders</h5>
                         <p class="!mb-0 text-[.85rem]">Investment Planner</p>
@@ -790,7 +790,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te6.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te6.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Laura Widerski</h5>
                         <p class="!mb-0 text-[.85rem]">Sales Specialist</p>
@@ -1013,7 +1013,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1090,8 +1090,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/career2.html b/public/html/career2.html
index ef50171..c33bbfa 100644
--- a/public/html/career2.html
+++ b/public/html/career2.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -636,15 +636,15 @@
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[80px]">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="assets/img/photos/g8.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="../assets/img/photos/g8.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g9.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g9.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g10.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g10.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -878,7 +878,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -955,8 +955,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/contact.html b/public/html/contact.html
index 5d2f13e..431a0a5 100644
--- a/public/html/contact.html
+++ b/public/html/contact.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,8 +24,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
           <a href='index.html'>
-            <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-            <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+            <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
           </a>
         </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -42,205 +42,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -354,87 +354,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -558,7 +558,7 @@
       <!-- /.navbar -->
     </header>
     <!-- /header -->
-    <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="assets/img/photos/bg3.jpg">
+    <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="../assets/img/photos/bg3.jpg">
       <div class="container pt-28 pb-40 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem] !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -709,7 +709,7 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-    <section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-[0]" data-image-src="assets/img/map.png">
+    <section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-[0]" data-image-src="../assets/img/map.png">
       <div class="container pt-0 pb-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 xl:pb-32 lg:pb-32 md:pb-32">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="lg:w-9/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -753,7 +753,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -830,8 +830,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/contact2.html b/public/html/contact2.html
index 62b09d6..8a27610 100644
--- a/public/html/contact2.html
+++ b/public/html/contact2.html
@@ -11,14 +11,14 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
   <!-- google fonts -->
    
    
    
   <!-- fonts -->
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -29,7 +29,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -46,205 +46,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -358,87 +358,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -589,13 +589,13 @@
             <div class="shape bg-dot primary rellax !w-[8rem] !h-[8rem] absolute opacity-50  bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: 0; left: -1.4rem; z-index: 0;"></div>
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
-                <figure class="rounded-[0.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[0.4rem]" src="assets/img/photos/g5.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[0.4rem]" src="../assets/img/photos/g5.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
-                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/g6.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/g6.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                   <div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
@@ -730,7 +730,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -807,8 +807,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/contact3.html b/public/html/contact3.html
index 240705f..f2292c7 100644
--- a/public/html/contact3.html
+++ b/public/html/contact3.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,8 +24,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+              <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+              <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -42,205 +42,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -354,87 +354,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -578,7 +578,7 @@
           <div class="col flex-[0_0_auto] max-w-full !px-[15px] relative z-[3] !mt-[-9rem] !mb-24">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="flex flex-wrap mx-0">
-                <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start hidden xl:block lg:block md:block bg-cover bg-[center_center] bg-no-repeat !bg-scroll md:min-h-[25rem]" data-image-src="assets/img/photos/tm1.jpg">
+                <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start hidden xl:block lg:block md:block bg-cover bg-[center_center] bg-no-repeat !bg-scroll md:min-h-[25rem]" data-image-src="../assets/img/photos/tm1.jpg">
                 </div>
                 <!--/column -->
                 <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
@@ -729,7 +729,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -806,8 +806,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo1.html b/public/html/demo1.html
index 16a5007..07966f1 100644
--- a/public/html/demo1.html
+++ b/public/html/demo1.html
@@ -13,13 +13,13 @@
     content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-  <link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" type="text/css" href="assets/css/fonts/thicccboi.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+  <link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" type="text/css" href="../assets/css/fonts/thicccboi.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/yellow.css">
-  <link rel="preload" href="assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/yellow.css">
+  <link rel="preload" href="../assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .accordion-wrapper .card-header button {
       color: #fab758;
@@ -40,7 +40,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -62,7 +62,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi1.jpg" alt="image">
+                                src="../assets/img/demos/mi1.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
@@ -70,7 +70,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi2.jpg" alt="image">
+                                src="../assets/img/demos/mi2.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
@@ -78,7 +78,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi3.jpg" alt="image">
+                                src="../assets/img/demos/mi3.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
@@ -86,7 +86,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi4.jpg" alt="image">
+                                src="../assets/img/demos/mi4.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
@@ -94,7 +94,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi5.jpg" alt="image">
+                                src="../assets/img/demos/mi5.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
@@ -102,7 +102,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi6.jpg" alt="image">
+                                src="../assets/img/demos/mi6.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
@@ -110,7 +110,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi7.jpg" alt="image">
+                                src="../assets/img/demos/mi7.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
@@ -118,7 +118,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi8.jpg" alt="image">
+                                src="../assets/img/demos/mi8.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
@@ -126,7 +126,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi9.jpg" alt="image">
+                                src="../assets/img/demos/mi9.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
@@ -134,7 +134,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi10.jpg"
+                                src="../assets/img/demos/mi10.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
@@ -142,7 +142,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi11.jpg"
+                                src="../assets/img/demos/mi11.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
@@ -150,7 +150,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi12.jpg"
+                                src="../assets/img/demos/mi12.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
@@ -158,7 +158,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi13.jpg"
+                                src="../assets/img/demos/mi13.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
@@ -166,7 +166,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi14.jpg"
+                                src="../assets/img/demos/mi14.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
@@ -174,7 +174,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi15.jpg"
+                                src="../assets/img/demos/mi15.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
@@ -182,7 +182,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi16.jpg"
+                                src="../assets/img/demos/mi16.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
@@ -190,7 +190,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi17.jpg"
+                                src="../assets/img/demos/mi17.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
@@ -198,7 +198,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi18.jpg"
+                                src="../assets/img/demos/mi18.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
@@ -206,7 +206,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi19.jpg"
+                                src="../assets/img/demos/mi19.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
@@ -214,7 +214,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi20.jpg"
+                                src="../assets/img/demos/mi20.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
@@ -222,7 +222,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi21.jpg"
+                                src="../assets/img/demos/mi21.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
@@ -230,7 +230,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi22.jpg"
+                                src="../assets/img/demos/mi22.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
@@ -238,7 +238,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi23.jpg"
+                                src="../assets/img/demos/mi23.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
@@ -246,7 +246,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi24.jpg"
+                                src="../assets/img/demos/mi24.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
@@ -254,7 +254,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi25.jpg"
+                                src="../assets/img/demos/mi25.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
@@ -262,7 +262,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi26.jpg"
+                                src="../assets/img/demos/mi26.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
@@ -270,7 +270,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi27.jpg"
+                                src="../assets/img/demos/mi27.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
@@ -278,7 +278,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi28.jpg"
+                                src="../assets/img/demos/mi28.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
@@ -286,7 +286,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi29.jpg"
+                                src="../assets/img/demos/mi29.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
@@ -294,7 +294,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi30.jpg"
+                                src="../assets/img/demos/mi30.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
@@ -302,7 +302,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi31.jpg"
+                                src="../assets/img/demos/mi31.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
@@ -310,7 +310,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi32.jpg"
+                                src="../assets/img/demos/mi32.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
@@ -318,7 +318,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi33.jpg"
+                                src="../assets/img/demos/mi33.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
@@ -326,7 +326,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi34.jpg"
+                                src="../assets/img/demos/mi34.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
@@ -487,103 +487,103 @@
                         class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -785,7 +785,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
           <div
             class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i2.png"
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i2.png"
  alt="image"></figure>
           </div>
           <!-- /column -->
@@ -904,7 +904,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-8 items-center">
           <div
             class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i3.png"
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i3.png"
  alt="image"></figure>
           </div>
           <!--/column -->
@@ -1025,7 +1025,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] lg:!mb-60 xl:!mb-80 items-center">
           <div
             class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i6.png"
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i6.png"
  alt="image"></figure>
           </div>
           <!--/column -->
@@ -1125,7 +1125,7 @@
               <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                 <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                   <div class="card-body p-[40px]">
-                    <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te1.jpg"
+                    <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te1.jpg"
  alt="image">
                     <h4 class="!mb-1 text-[1rem]">Coriss Ambady</h4>
                     <div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Financial
@@ -1151,7 +1151,7 @@
               <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                 <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                   <div class="card-body p-[40px]">
-                    <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te2.jpg"
+                    <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te2.jpg"
  alt="image">
                     <h4 class="!mb-1 text-[1rem]">Cory Zamora</h4>
                     <div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Marketing
@@ -1177,7 +1177,7 @@
               <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                 <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                   <div class="card-body p-[40px]">
-                    <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te3.jpg"
+                    <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te3.jpg"
  alt="image">
                     <h4 class="!mb-1 text-[1rem]">Nikolas Brooten</h4>
                     <div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Sales Manager
@@ -1203,7 +1203,7 @@
               <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                 <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                   <div class="card-body p-[40px]">
-                    <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te4.jpg"
+                    <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te4.jpg"
  alt="image">
                     <h4 class="!mb-1 text-[1rem]">Jackie Sanders</h4>
                     <div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Investment
@@ -1241,7 +1241,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
           <div
             class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i8.png"
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i8.png"
  alt="image"></figure>
           </div>
           <!--/column -->
@@ -1523,7 +1523,7 @@
           class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-10 xl:!mb-[4.5rem] lg:!mb-[4.5rem] md:!mb-[4.5rem] items-center">
           <div
             class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i5.png"
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i5.png"
  alt="image"></figure>
           </div>
           <!--/column -->
@@ -1546,37 +1546,37 @@
           <div class="flex flex-wrap mx-0 md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-40px] items-center">
             <div
               class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c1.png"
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c1.png"
                   alt="image"></figure>
             </div>
             <!--/column -->
             <div
               class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c2.png"
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c2.png"
                   alt="image"></figure>
             </div>
             <!--/column -->
             <div
               class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c3.png"
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c3.png"
                   alt="image"></figure>
             </div>
             <!--/column -->
             <div
               class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c4.png"
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c4.png"
                   alt="image"></figure>
             </div>
             <!--/column -->
             <div
               class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c5.png"
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c5.png"
                   alt="image"></figure>
             </div>
             <!--/column -->
             <div
               class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c6.png"
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c6.png"
                   alt="image"></figure>
             </div>
             <!--/column -->
@@ -1606,7 +1606,7 @@
         <div
           class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.
             </p>
             <nav class="nav social social-white">
@@ -1708,8 +1708,8 @@
         d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo10.html b/public/html/demo10.html
index 64ed9e8..6a3945b 100644
--- a/public/html/demo10.html
+++ b/public/html/demo10.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
-  <link rel="preload" href="assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
+  <link rel="preload" href="../assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/orange.css">
+  <link rel="stylesheet" href="../assets/css/colors/orange.css">
   <style>
     .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
     background: #f78b77 !important;
@@ -55,7 +55,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -72,205 +72,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -384,87 +384,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -607,7 +607,7 @@
     <!-- /section -->
     <section class="wrapper  bg-[#262b32] opacity-100  !text-[#cacaca]">
       <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
-        <figure class="!rounded-[.4rem] xl:!mt-[-17.5rem] lg:!mt-[-17.5rem] md:!mt-[-12.5rem] !mb-[4.5rem]" data-cue="slideInDown" data-delay="900"><img class="!rounded-[.4rem]" src="assets/img/photos/about15.jpg" alt="image"></figure>
+        <figure class="!rounded-[.4rem] xl:!mt-[-17.5rem] lg:!mt-[-17.5rem] md:!mt-[-12.5rem] !mb-[4.5rem]" data-cue="slideInDown" data-delay="900"><img class="!rounded-[.4rem]" src="../assets/img/photos/about15.jpg" alt="image"></figure>
         <div class="flex flex-wrap mx-[-15px]">
           <div class="md:w-10/12 lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
             <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-bold !text-white !mb-[2.5rem]">The service we offer is specifically designed to meet your needs.</h3>
@@ -652,13 +652,13 @@
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px] !relative xl:!order-2 lg:!order-2">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !relative">
               <div class="w-5/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto" data-cue="fadeIn" data-delay="300" src="assets/img/photos/sa9.jpg" alt="image">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" data-cue="fadeIn" data-delay="600" src="assets/img/photos/sa10.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto" data-cue="fadeIn" data-delay="300" src="../assets/img/photos/sa9.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" data-cue="fadeIn" data-delay="600" src="../assets/img/photos/sa10.jpg" alt="image">
               </div>
               <!-- /column -->
               <div class="w-7/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" data-cue="fadeIn" data-delay="900" src="assets/img/photos/sa11.jpg" alt="image">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" data-cue="fadeIn" data-delay="1200" src="assets/img/photos/sa12.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" data-cue="fadeIn" data-delay="900" src="../assets/img/photos/sa11.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" data-cue="fadeIn" data-delay="1200" src="../assets/img/photos/sa12.jpg" alt="image">
               </div>
               <!-- /column -->
             </div>
@@ -703,12 +703,12 @@
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !relative items-center">
               <div class="w-6/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !ml-auto" data-cue="fadeIn" data-delay="300" src="assets/img/photos/sa13.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !ml-auto" data-cue="fadeIn" data-delay="300" src="../assets/img/photos/sa13.jpg" alt="image">
               </div>
               <!-- /column -->
               <div class="w-6/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" data-cue="fadeIn" data-delay="900" src="assets/img/photos/sa14.jpg" alt="image">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" data-cue="fadeIn" data-delay="1200" src="assets/img/photos/sa15.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" data-cue="fadeIn" data-delay="900" src="../assets/img/photos/sa14.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" data-cue="fadeIn" data-delay="1200" src="../assets/img/photos/sa15.jpg" alt="image">
               </div>
               <!-- /column -->
             </div>
@@ -857,11 +857,11 @@
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="xl:w-10/12 xl:!ml-[16.66666667%] lg:w-10/12 lg:!ml-[16.66666667%] md:w-10/12 md:!ml-[16.66666667%] w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
-                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/ab1.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/ab1.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                   <div class="w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
-                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/ab2.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/ab2.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                 </div>
@@ -869,7 +869,7 @@
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/ab3.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/ab3.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -944,13 +944,13 @@
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full !relative">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
-                <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="assets/img/photos/g5.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="../assets/img/photos/g5.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
-                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g6.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g6.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                   <div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
@@ -984,27 +984,27 @@
         <div class="xl:!px-5 lg:!px-5">
           <div class="flex flex-wrap mx-0 md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-40px] items-center">
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c1.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c1.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c2.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c2.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c3.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c3.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c4.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c4.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c5.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c5.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c6.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c6.png" alt="image"></figure>
             </div>
             <!--/column -->
           </div>
@@ -1022,7 +1022,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1100,8 +1100,8 @@
       <path class="fill-none stroke-[#f78b77] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo11.html b/public/html/demo11.html
index f10715f..178da83 100644
--- a/public/html/demo11.html
+++ b/public/html/demo11.html
@@ -11,11 +11,11 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/purple.css">
+  <link rel="stylesheet" href="../assets/css/colors/purple.css">
   <style>
         .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
     background: #747ed1 !important;
@@ -45,8 +45,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+              <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+              <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -63,205 +63,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -375,87 +375,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -587,11 +587,11 @@
             <div class="swiper-container dots-over !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] relative z-10" data-margin="5" data-nav="true" data-dots="true">
               <div class="swiper">
                 <div class="swiper-wrapper">
-                  <div class="swiper-slide"><img src="assets/img/photos/about21.jpg" class="rounded-[.4rem] w-full h-auto" alt="image"></div>
+                  <div class="swiper-slide"><img src="../assets/img/photos/about21.jpg" class="rounded-[.4rem] w-full h-auto" alt="image"></div>
                   <div class="swiper-slide">
-                    <a href="assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !absolute z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox data-gallery="hero"><i class="icn-caret-right"></i></a>                    
-                    <img src="assets/img/photos/about22.jpg" class="rounded-[.4rem] w-full h-auto" alt="image"></div>
-                  <div class="swiper-slide"><img src="assets/img/photos/about23.jpg" class="rounded-[.4rem] w-full h-auto" alt="image"></div>
+                    <a href="../assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !absolute z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox data-gallery="hero"><i class="icn-caret-right"></i></a>                    
+                    <img src="../assets/img/photos/about22.jpg" class="rounded-[.4rem] w-full h-auto" alt="image"></div>
+                  <div class="swiper-slide"><img src="../assets/img/photos/about23.jpg" class="rounded-[.4rem] w-full h-auto" alt="image"></div>
                 </div>
                 <!--/.swiper-wrapper -->
               </div>
@@ -678,7 +678,7 @@
         <!-- /.relative -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center !mb-[4.5rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i11.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i11.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -735,7 +735,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center xl:!mb-[5rem] lg:!mb-[5rem] md:!mb-[5rem]">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i17.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i17.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -771,7 +771,7 @@
       <div class="container py-[4.5rem] xl:pt-0 lg:pt-0 md:pt-0 xl:pb-24 lg:pb-24 md:pb-24">
         <div class="flex flex-wrap mx-[-15px] xl:!-translate-y-2/4 lg:!-translate-y-2/4 md:!-translate-y-2/4 !mb-[4.5rem] xl:!mb-7 lg:!mb-7 md:!mb-7">
           <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-            <div class="card image-wrapper bg-full bg-image bg-overlay bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="assets/img/photos/bg2.jpg">
+            <div class="card image-wrapper bg-full bg-image bg-overlay bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="../assets/img/photos/bg2.jpg">
               <div class="card-body p-[2.25rem] xl:!p-[2.5rem]">
                 <div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-40px] !text-center !text-white">
                   <div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px]">
@@ -821,7 +821,7 @@
                   <div class="item-inner">
                     <article>
                       <div class="card">
-                        <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                        <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                           <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                             <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                           </figcaption>
@@ -857,7 +857,7 @@
                   <div class="item-inner">
                     <article>
                       <div class="card">
-                        <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                        <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                           <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                             <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                           </figcaption>
@@ -893,7 +893,7 @@
                   <div class="item-inner">
                     <article>
                       <div class="card">
-                        <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                        <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                           <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                             <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                           </figcaption>
@@ -929,7 +929,7 @@
                   <div class="item-inner">
                     <article>
                       <div class="card">
-                        <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                        <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b7.jpg" alt="image"></a>
                           <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                             <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                           </figcaption>
@@ -977,9 +977,9 @@
       <div class="container py-[4.5rem] xl:!py-28 lg:!py-28 md:!py-28">
         <div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] items-center !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
           <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !relative !mt-[80px]">
-            <a href="assets/media/movie.mp4" class="btn btn-circle btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1]   active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#747ed1] after:!bg-[#747ed1] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0  after:content-[''] after:block after:absolute after:z-[-1] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:rounded-[50%] after:inset-0 after:[animation-delay:.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
+            <a href="../assets/media/movie.mp4" class="btn btn-circle btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1]   active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#747ed1] after:!bg-[#747ed1] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0  after:content-[''] after:block after:absolute after:z-[-1] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:rounded-[50%] after:inset-0 after:[animation-delay:.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
             <div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
-            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="assets/img/photos/about12.jpg" alt="image"></figure>
+            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="../assets/img/photos/about12.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] !mt-[80px]">
@@ -1020,7 +1020,7 @@
             <div class="!relative">
               <div class="shape !rounded-[.4rem] !bg-[#f2f3fb] rellax xl:block lg:block md:block absolute" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
               <div class="card">
-                <figure class="card-img-top"><img class="max-w-full h-auto" src="assets/img/avatars/t1.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img class="max-w-full h-auto" src="../assets/img/avatars/t1.jpg" alt="image"></figure>
                 <div class="card-body px-6 py-5">
                   <h4 class="!mb-1">Coriss Ambady</h4>
                   <p class="!mb-0 text-[.85rem]">Financial Analyst</p>
@@ -1036,7 +1036,7 @@
             <div class="!relative">
               <div class="shape !rounded-[.4rem] !bg-[#f2f3fb] rellax xl:block lg:block md:block absolute" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
               <div class="card">
-                <figure class="card-img-top"><img class="max-w-full h-auto" src="assets/img/avatars/t2.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img class="max-w-full h-auto" src="../assets/img/avatars/t2.jpg" alt="image"></figure>
                 <div class="card-body px-6 py-5">
                   <h4 class="!mb-1">Cory Zamora</h4>
                   <p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
@@ -1052,7 +1052,7 @@
             <div class="!relative">
               <div class="shape !rounded-[.4rem] !bg-[#f2f3fb] rellax xl:block lg:block md:block absolute" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
               <div class="card">
-                <figure class="card-img-top"><img class="max-w-full h-auto" src="assets/img/avatars/t3.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img class="max-w-full h-auto" src="../assets/img/avatars/t3.jpg" alt="image"></figure>
                 <div class="card-body px-6 py-5">
                   <h4 class="!mb-1">Nikolas Brooten</h4>
                   <p class="!mb-0 text-[.85rem]">Sales Manager</p>
@@ -1068,7 +1068,7 @@
             <div class="!relative">
               <div class="shape !rounded-[.4rem] !bg-[#f2f3fb] rellax xl:block lg:block md:block absolute" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
               <div class="card">
-                <figure class="card-img-top"><img class="max-w-full h-auto" src="assets/img/avatars/t4.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img class="max-w-full h-auto" src="../assets/img/avatars/t4.jpg" alt="image"></figure>
                 <div class="card-body px-6 py-5">
                   <h4 class="!mb-1">Jackie Sanders</h4>
                   <p class="!mb-0">Investment Planner</p>
@@ -1090,7 +1090,7 @@
       <div class="container py-[4.5rem] xl:pt-0 lg:pt-0 md:pt-0 xl:pb-28 lg:pb-28 md:pb-28">
         <div class="flex flex-wrap mx-[-15px] !text-white !text-center">
           <div class="xl:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[4.5rem] xl:!mb-[-1.5rem] lg:!mb-[-1.5rem]">
-            <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0  xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="assets/img/photos/bg2.jpg">
+            <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0  xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="../assets/img/photos/bg2.jpg">
               <div class="card-body p-9 xl:!p-14">
                 <div class="flex flex-wrap mx-0">
                   <div class="xxl:w-9/12 w-full flex-[0_0_auto] max-w-full !mx-auto">
@@ -1322,7 +1322,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1400,8 +1400,8 @@
       <path class="fill-none stroke-[#a07cc5] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo12.html b/public/html/demo12.html
index 1bc8a69..61e178f 100644
--- a/public/html/demo12.html
+++ b/public/html/demo12.html
@@ -11,11 +11,11 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/orange.css">
+  <link rel="stylesheet" href="../assets/css/colors/orange.css">
   <style>
     .accordion-wrapper .card-header button{
       color: #f78b77;
@@ -34,7 +34,7 @@
       <nav class="navbar navbar-expand-lg extended navbar-light caret-none">
         <div class="container xl:!flex-col lg:!flex-col">
           <div class="topbar flex flex-row w-full justify-between items-center">
-            <div class="navbar-brand"><a href='index.html'><img src="assets/img/truncgil-yatay.svg" alt="image"></a></div>
+            <div class="navbar-brand"><a href='index.html'><img src="../assets/img/truncgil-yatay.svg" alt="image"></a></div>
             <div class="navbar-other !ml-auto">
               <ul class="navbar-nav !flex-row items-center">
                 <li class="nav-item"><a class="nav-link hover:!text-[#f78b77]" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle before:content-['\eb99'] !text-[1.1rem]"></i></a></li>
@@ -70,205 +70,205 @@
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo1.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 1</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo2.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 2</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo3.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 3</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo4.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 4</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo5.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 5</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo6.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 6</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo7.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 7</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo8.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 8</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo9.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 9</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo10.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 10</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo11.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 11</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo12.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 12</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo13.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 13</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo14.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 14</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo15.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 15</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo16.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 16</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo17.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 17</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo18.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 18</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo19.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 19</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo20.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 20</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo21.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 21</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo22.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 22</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo23.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 23</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo24.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 24</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo25.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 25</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo26.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 26</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo27.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 27</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo28.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 28</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo29.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 29</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo30.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 30</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo31.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 31</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo32.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 32</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo33.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 33</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo34.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 34</span>
                             </a>
                           </li>
@@ -382,87 +382,87 @@
                       <li class="mega-menu-content">
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                               <span>About</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                               <span>Blog</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                               <span>Call to Action</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                               <span>Clients</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                               <span>Contact</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                               <span>Facts</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                               <span>FAQ</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                               <span>Features</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                               <span>Footer</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                               <span>Hero</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                               <span>Misc</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                               <span>Navbar</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                               <span>Portfolio</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                               <span>Pricing</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                               <span>Process</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                               <span>Team</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                               <span>Testimonials</span>
                             </a>
                           </li>
@@ -627,7 +627,7 @@
             <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             <div class="flex flex-wrap mx-[-15px]">
               <div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%]">
-                <figure class="!mb-6"><img src="assets/img/illustrations/i7.png" alt="image"></figure>
+                <figure class="!mb-6"><img src="../assets/img/illustrations/i7.png" alt="image"></figure>
               </div>
               <!-- /column -->
             </div>
@@ -683,7 +683,7 @@
           </div>
           <!-- /column -->
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full" data-cue="slideInDown">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i6.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i6.png" alt="image"></figure>
           </div>
           <!-- /column -->
         </div>
@@ -751,7 +751,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i8.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i8.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -789,7 +789,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i2.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i2.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -984,19 +984,19 @@
               </div>
               <!-- /.item -->
               <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="assets/img/photos/rp1.jpg" alt="image"></a></figure>
+                <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/rp1.jpg" alt="image"></a></figure>
                 <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#a07cc5]  !mb-2 !text-[#a07cc5]">Stationary</div>
                 <h2 class="post-title h3">Ipsum Ultricies Cursus</h2>
               </div>
               <!-- /.item -->
               <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="assets/img/photos/rp2.jpg" alt="image"></a></figure>
+                <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/rp2.jpg" alt="image"></a></figure>
                 <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#7cb798]  !mb-2 !text-[#7cb798]">Invitation</div>
                 <h2 class="post-title h3">Mollis Ipsum Mattis</h2>
               </div>
               <!-- /.item -->
               <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/rp3.jpg" alt="image"></a></figure>
+                <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/rp3.jpg" alt="image"></a></figure>
                 <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1]  !mb-2 !text-[#747ed1]">Notebook</div>
                 <h2 class="post-title h3">Magna Tristique Inceptos</h2>
               </div>
@@ -1015,7 +1015,7 @@
       <div class="container py-[4.5rem] xl:!py-28 lg:!py-28 md:!py-28">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i5.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i5.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -1062,7 +1062,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block">All rights reserved.</p>
             <nav class="nav social">
               <a class="!text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-[#5daed5] text-[1rem]"></i></a>
@@ -1140,8 +1140,8 @@
       <path class="fill-none stroke-[#f78b77] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo13.html b/public/html/demo13.html
index 8524a51..2bece2d 100644
--- a/public/html/demo13.html
+++ b/public/html/demo13.html
@@ -11,11 +11,11 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/purple.css">
+  <link rel="stylesheet" href="../assets/css/colors/purple.css">
   <style>
     .navbar-light.fixed.navbar-stick .nav-link:hover{
               color: #747ed1;
@@ -40,8 +40,8 @@
         <div class="container justify-between items-center">
           <div class="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
             <div class="navbar-brand"><a href='index.html'>
-                <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-                <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+                <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+                <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
               </a></div>
             <div class="navbar-other !ml-auto">
               <ul class="navbar-nav flex-row items-center">
@@ -57,8 +57,8 @@
           <div class="navbar-collapse-wrapper flex flex-row items-center w-full">
             <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
               <div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!px-[5rem] xl:!order-1 xl:!px-[5rem] p-[1.5rem] !flex items-center justify-between flex-row">
-                <a class='transition-none hidden lg:!flex xl:!flex' href='index.html'><img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-                  <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image"></a>
+                <a class='transition-none hidden lg:!flex xl:!flex' href='index.html'><img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+                  <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image"></a>
                   
                   
               </div>
@@ -71,205 +71,205 @@
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo1.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 1</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo2.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 2</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo3.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 3</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo4.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 4</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo5.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 5</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo6.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 6</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo7.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 7</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo8.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 8</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo9.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 9</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo10.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 10</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo11.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 11</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo12.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 12</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo13.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 13</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo14.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 14</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo15.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 15</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo16.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 16</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo17.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 17</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo18.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 18</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo19.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 19</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo20.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 20</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo21.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 21</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo22.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 22</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo23.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 23</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo24.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 24</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo25.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 25</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo26.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 26</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo27.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 27</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo28.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 28</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo29.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 29</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo30.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 30</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo31.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 31</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo32.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 32</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo33.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 33</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo34.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 34</span>
                             </a>
                           </li>
@@ -388,87 +388,87 @@
                       <li class="mega-menu-content">
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                               <span>About</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                               <span>Blog</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                               <span>Call to Action</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                               <span>Clients</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                               <span>Contact</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                               <span>Facts</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                               <span>FAQ</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                               <span>Features</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                               <span>Footer</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                               <span>Hero</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                               <span>Misc</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                               <span>Navbar</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                               <span>Portfolio</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                               <span>Pricing</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                               <span>Process</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                               <span>Team</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                               <span>Testimonials</span>
                             </a>
                           </li>
@@ -580,7 +580,7 @@
           <div class="md:w-9/12 lg:w-7/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="zoomIn" data-group="page-title" data-interval="-200">
             <h2 class="h6 uppercase !tracking-[0.05rem] !text-white !mb-5">Hello! This is Trunçgil</h2>
             <h3 class="xl:!text-[2.4rem] !text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] !text-white !mb-7">We bring rapid solutions for your business</h3>
-            <a href="assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !relative z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
+            <a href="../assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !relative z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
           </div>
           <!-- /column -->
         </div>
@@ -593,7 +593,7 @@
       <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[-10rem]">
-            <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/about5.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about5.jpg" alt="image"></figure>
             <div class="flex flex-wrap mx-[-15px]">
               <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                 <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0  xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="./assets/img/photos/bg2.jpg">
@@ -637,19 +637,19 @@
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[20px] !mt-[40px] max-w-full xl:!order-2 lg:!order-2">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]" data-cues="fadeIn" data-group="images">
               <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[16.66666667%] !self-end">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g1.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g1.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full !self-end">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g2.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g2.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g3.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g3.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full !self-start">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g4.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g4.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -755,7 +755,7 @@
                     <blockquote class="!pl-0 text-[1rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
                       <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
                       <div class="flex items-center text-left justify-center">
-                        <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te1.jpg" alt="image">
+                        <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te1.jpg" alt="image">
                         <div class="info !pl-4">
                           <h6 class="!mb-1 !text-white !leading-[1.55]">Coriss Ambady</h6>
                           <p class="!mb-0 text-[.8rem]">Financial Analyst</p>
@@ -768,7 +768,7 @@
                     <blockquote class="!pl-0 text-[1rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
                       <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
                       <div class="flex items-center text-left justify-center">
-                        <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te2.jpg" alt="image">
+                        <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te2.jpg" alt="image">
                         <div class="info !pl-4">
                           <h6 class="!mb-1 !text-white !leading-[1.55]">Cory Zamora</h6>
                           <p class="!mb-0 text-[.8rem]">Marketing Specialist</p>
@@ -781,7 +781,7 @@
                     <blockquote class="!pl-0 text-[1rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
                       <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
                       <div class="flex items-center text-left justify-center">
-                        <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te3.jpg" alt="image">
+                        <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te3.jpg" alt="image">
                         <div class="info !pl-4">
                           <h6 class="!mb-1 !text-white !leading-[1.55]">Nikolas Brooten</h6>
                           <p class="!mb-0 text-[.8rem]">Sales Manager</p>
@@ -818,19 +818,19 @@
           <div class="project itemgrid grid-view">
             <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] xl:!mt-[-70px] lg:!mt-[-70px] md:!mt-[-70px] isotope" data-cue="slideInUp">
               <div class="item xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
-                <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="assets/img/photos/rp1.jpg" alt="image"></a></figure>
+                <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/rp1.jpg" alt="image"></a></figure>
                 <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#747ed1]">Stationary</div>
                 <h3 class="post-title">Ipsum Ultricies Cursus</h3>
               </div>
               <!-- /.item -->
               <div class="item xl:w-7/12 lg:w-7/12 md:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full xl:!mt-28 lg:!mt-28 md:!mt-28 max-md:!mt-[50px]">
-                <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="assets/img/photos/rp2.jpg" alt="image"></a></figure>
+                <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/rp2.jpg" alt="image"></a></figure>
                 <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#f78b77]">Invitation</div>
                 <h3 class="post-title">Mollis Ipsum Mattis</h3>
               </div>
               <!-- /.item -->
               <div class="item xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
-                <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/rp3.jpg" alt="image"></a></figure>
+                <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/rp3.jpg" alt="image"></a></figure>
                 <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#e2626b]">Notebook</div>
                 <h3 class="post-title">Magna Tristique Inceptos</h3>
               </div>
@@ -856,35 +856,35 @@
           <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[50px]">
             <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] !mt-[-70px]" data-cues="fadeIn" data-group="clients">
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z1.png" alt="image"></figure>
+                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z1.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z2.png" alt="image"></figure>
+                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z2.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z3.png" alt="image"></figure>
+                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z3.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z4.png" alt="image"></figure>
+                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z4.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z5.png" alt="image"></figure>
+                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z5.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z6.png" alt="image"></figure>
+                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z6.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z7.png" alt="image"></figure>
+                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z7.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z8.png" alt="image"></figure>
+                <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z8.png" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -974,13 +974,13 @@
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full !relative">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
-                <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="assets/img/photos/g5.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="../assets/img/photos/g5.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
-                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g6.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g6.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                   <div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
@@ -1023,7 +1023,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1101,8 +1101,8 @@
       <path class="fill-none stroke-[#747ed1] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo14.html b/public/html/demo14.html
index 927491e..50895fb 100644
--- a/public/html/demo14.html
+++ b/public/html/demo14.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/violet.css">
-  <link rel="preload" href="assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/violet.css">
+  <link rel="preload" href="../assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
   <style>
         .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
     background: #a07cc5 !important;
@@ -38,7 +38,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -55,205 +55,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -367,87 +367,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -587,7 +587,7 @@
         <!-- /.row -->
         <div class="!relative">
           <div class="shape bg-dot violet rellax !w-[7rem] !h-[12.5rem] !absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -2.5rem; right: -2.7rem;"></div>
-          <figure class="rounded-[.4rem] xl:!mb-[-10rem] lg:!mb-[-10rem] md:!mb-[-10rem]"><img class="rounded-[.4rem]" src="assets/img/photos/about18.jpg" alt="image"></figure>
+          <figure class="rounded-[.4rem] xl:!mb-[-10rem] lg:!mb-[-10rem] md:!mb-[-10rem]"><img class="rounded-[.4rem]" src="../assets/img/photos/about18.jpg" alt="image"></figure>
         </div>
       </div>
       <!-- /.container -->
@@ -606,7 +606,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] !relative">
             <div class="shape bg-dot violet rellax !w-[7rem] !h-[8rem] !absolute z-[1] opacity-50" data-rellax-speed="1" style="bottom: -2rem; left: -0.7rem;"></div>
-            <figure class="!rounded-[.4rem] !mb-0"><img class="!rounded-[.4rem]" src="assets/img/photos/se3.jpg" alt="image"></figure>
+            <figure class="!rounded-[.4rem] !mb-0"><img class="!rounded-[.4rem]" src="../assets/img/photos/se3.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
@@ -647,7 +647,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] xl:!order-2 lg:!order-2 !relative">
             <div class="shape !rounded-[50%] !bg-[#f6f3f9] rellax !w-[8rem] !h-[8rem] absolute" data-rellax-speed="1" style="bottom: -2.5rem; right: -1.5rem;"></div>
-            <figure class="!rounded-[.4rem] !mb-0"><img class="!rounded-[.4rem]" src="assets/img/photos/se4.jpg" alt="image"></figure>
+            <figure class="!rounded-[.4rem] !mb-0"><img class="!rounded-[.4rem]" src="../assets/img/photos/se4.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
@@ -689,7 +689,7 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-    <section class="wrapper image-wrapper bg-image bg-overlay !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="assets/img/photos/bg10.jpg">
+    <section class="wrapper image-wrapper bg-image bg-overlay !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="../assets/img/photos/bg10.jpg">
       <div class="container py-[8rem]">
         <div class="flex flex-wrap mx-[-15px] !text-center">
           <div class="lg:w-11/12 xl:w-10/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -717,7 +717,7 @@
         <div class="itemgrid grid-view projects-masonry">
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/pd1.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/pd1.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#fab758]">Coffee</div>
@@ -729,7 +729,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full workshop">
-              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="assets/img/photos/pd2.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/pd2.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#e2626b]">Stationary</div>
@@ -741,7 +741,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full still-life">
-              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="assets/img/photos/pd3.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/pd3.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#f78b77]">Branding</div>
@@ -753,7 +753,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="assets/img/photos/pd4.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/pd4.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#a07cc5]">Product</div>
@@ -765,7 +765,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/pd5.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/pd5.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#7cb798]">Print</div>
@@ -777,7 +777,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full workshop">
-              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="assets/img/photos/pd6.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/pd6.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#54a8c7]">Workshop</div>
@@ -926,7 +926,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full !relative">
             <div class="shape bg-dot leaf rellax !w-[7rem] !h-[8rem] !absolute z-[1] opacity-50" data-rellax-speed="1" style="bottom: -2rem; left: -0.7rem;"></div>
-            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="assets/img/photos/about20.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about20.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
@@ -965,7 +965,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2 !relative">
             <div class="shape !rounded-[50%] bg-line leaf rellax !w-[8rem] !h-[8rem] !absolute z-[1] opacity-50" data-rellax-speed="1" style="bottom: -2.5rem; right: -1.5rem;"></div>
-            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="assets/img/photos/about19.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about19.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
@@ -1020,7 +1020,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1098,8 +1098,8 @@
       <path class="fill-none stroke-[#a07cc5] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo15.html b/public/html/demo15.html
index 1e79c3e..bd60267 100644
--- a/public/html/demo15.html
+++ b/public/html/demo15.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,8 +24,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+              <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+              <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -42,205 +42,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -354,87 +354,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -606,7 +606,7 @@
       <div class="swiper-container swiper-hero dots-over relative z-10" data-margin="0" data-autoplay="true" data-autoplaytime="7000" data-nav="true" data-dots="true" data-items="1">
         <div class="swiper">
           <div class="swiper-wrapper">
-            <div class="swiper-slide bg-overlay bg-overlay-400  bg-[#21262c] opacity-100  bg-image !bg-cover !bg-[center_center] !h-[750px] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="assets/img/photos/bg7.jpg">
+            <div class="swiper-slide bg-overlay bg-overlay-400  bg-[#21262c] opacity-100  bg-image !bg-cover !bg-[center_center] !h-[750px] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="../assets/img/photos/bg7.jpg">
               <div class="container !h-full">
                 <div class="flex flex-wrap mx-[-15px] !h-full">
                   <div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-7/12 lg:!ml-0 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full text-center lg:text-left xl:text-left justify-center self-center items-start">
@@ -621,13 +621,13 @@
               <!--/.container -->
             </div>
             <!--/.swiper-slide -->
-            <div class="swiper-slide bg-overlay bg-overlay-400  bg-[#21262c] opacity-100  bg-image !bg-cover !bg-[center_center] !h-[750px] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="assets/img/photos/bg8.jpg">
+            <div class="swiper-slide bg-overlay bg-overlay-400  bg-[#21262c] opacity-100  bg-image !bg-cover !bg-[center_center] !h-[750px] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="../assets/img/photos/bg8.jpg">
               <div class="container !h-full">
                 <div class="flex flex-wrap mx-[-15px] !h-full">
                   <div class="md:w-11/12 lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center justify-center self-center">
                     <h2 class="xl:!text-[2.8rem] !leading-[1.2] font-bold !text-[calc(1.405rem_+_1.86vw)] !mb-4 !text-white animate__animated animate__slideInDown animate__delay-1s">We are trusted by over a million customers.</h2>
                     <p class="lead text-[1.15rem] leading-normal !mb-7 !text-white animate__animated animate__slideInRight animate__delay-2s">Here a few reasons why our customers choose us.</p>
-                    <div class="animate__animated animate__slideInUp animate__delay-3s"><a href="assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !relative z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a></div>
+                    <div class="animate__animated animate__slideInUp animate__delay-3s"><a href="../assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !relative z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a></div>
                   </div>
                   <!--/column -->
                 </div>
@@ -636,7 +636,7 @@
               <!--/.container -->
             </div>
             <!--/.swiper-slide -->
-            <div class="swiper-slide bg-overlay bg-overlay-400  bg-[#21262c] opacity-100  bg-image !bg-cover !bg-[center_center] !h-[750px] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="assets/img/photos/bg9.jpg">
+            <div class="swiper-slide bg-overlay bg-overlay-400  bg-[#21262c] opacity-100  bg-image !bg-cover !bg-[center_center] !h-[750px] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="../assets/img/photos/bg9.jpg">
               <div class="container !h-full">
                 <div class="flex flex-wrap mx-[-15px] !h-full">
                   <div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-7/12 lg:!ml-[41.66666667%] xl:w-6/12 xl:!ml-[50%] xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xxl:!ml-[50%] text-center lg:text-left xl:text-left justify-center self-center items-start">
@@ -666,10 +666,10 @@
             <div class="shape bg-dot primary bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] rellax !w-[6rem] !h-[10rem] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: 3rem; left: 5.5rem"></div>
             <div class="flex flex-wrap !relative overlap-grid-2">
               <div class="item xl:w-[70%] xl:z-[3] xl:ml-[30%] xl:!mt-0 lg:w-[70%] lg:z-[3] lg:ml-[30%] lg:!mt-0 md:w-[70%] md:z-[3] md:ml-[30%] md:!mt-0">
-                <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative"><img class="!rounded-[.4rem] " src="assets/img/photos/about2.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative"><img class="!rounded-[.4rem] " src="../assets/img/photos/about2.jpg" alt="image"></figure>
               </div>
               <div class="item xl:w-[55%] xl:!mt-[-45%] xl:z-[4] xl:ml-0 lg:w-[55%] lg:!mt-[-45%] lg:z-[4] lg:ml-0 md:w-[55%] md:!mt-[-45%] md:z-[4] md:ml-0">
-                <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative"><img class="!rounded-[.4rem] " src="assets/img/photos/about3.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative"><img class="!rounded-[.4rem] " src="../assets/img/photos/about3.jpg" alt="image"></figure>
               </div>
             </div>
           </div>
@@ -776,7 +776,7 @@
         <div class="flex flex-wrap mx-[-15px] lg:mx-[-20px] xl:mx-0 items-center">
           <div class="md:w-5/12 lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] lg:!px-[20px] xl:px-0 max-w-full xl:!ml-[8.33333333%] max-lg:!hidden xl:!flex lg:!flex !relative !self-end">
             <div class="shape !rounded-[50%] !bg-[#e0e9fa] rellax !w-[12.5rem] !h-[12.5rem] hidden xl:block lg:block z-[1] absolute" data-rellax-speed="1" style="top: 7rem; left: 1rem"></div>
-            <figure class=" relative z-[2]"><img class="w-full max-w-full !h-auto" src="assets/img/photos/co1.png" alt="image"></figure>
+            <figure class=" relative z-[2]"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/co1.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="md:w-7/12 lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] lg:!px-[20px] xl:px-0 max-w-full xl:!ml-[8.33333333%]">
@@ -853,7 +853,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te1.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te1.jpg" alt="image">
                         <h4 class="!mb-1">Coriss Ambady</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Financial Analyst</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -875,7 +875,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te2.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te2.jpg" alt="image">
                         <h4 class="!mb-1">Cory Zamora</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Marketing Specialist</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -897,7 +897,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te3.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te3.jpg" alt="image">
                         <h4 class="!mb-1">Nikolas Brooten</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Sales Manager</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -919,7 +919,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te4.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te4.jpg" alt="image">
                         <h4 class="!mb-1">Jackie Sanders</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Investment Planner</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -941,7 +941,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te5.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te5.jpg" alt="image">
                         <h4 class="!mb-1">Laura Widerski</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Sales Specialist</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -963,7 +963,7 @@
                   <div class="item-inner">
                     <div class="card">
                       <div class="card-body p-[40px]">
-                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te6.jpg" alt="image">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te6.jpg" alt="image">
                         <h4 class="!mb-1">Tina Geller</h4>
                         <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Financial Analyst</div>
                         <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -1037,7 +1037,7 @@
         <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center">
           <div class="md:w-8/12 lg:w-6/12 xl:w-5/12 lg:!ml-0 xl:!ml-[8.33333333%] w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full !relative">
             <div class="shape bg-dot primary rellax !w-[7rem] !h-[12.5rem] !bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -2rem; left: -1.4rem;"></div>
-            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem] w-full max-w-full !h-auto" src="assets/img/photos/about4.jpg" alt="image"></figure>
+            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem] w-full max-w-full !h-auto" src="../assets/img/photos/about4.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -1128,7 +1128,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full max-lg:!mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
@@ -1189,8 +1189,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo16.html b/public/html/demo16.html
index b515d19..68fa756 100644
--- a/public/html/demo16.html
+++ b/public/html/demo16.html
@@ -11,11 +11,11 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/pink.css">
+  <link rel="stylesheet" href="../assets/css/colors/pink.css">
   <style>
       @media (max-width: 991.98px){
       .navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
@@ -36,7 +36,7 @@
           <div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row !flex-nowrap w-full justify-between items-center">
             <div class="navbar-brand w-full">
               <a href='index.html'>
-                <img src="assets/img/truncgil-yatay.svg" alt="image">
+                <img src="../assets/img/truncgil-yatay.svg" alt="image">
               </a>
             </div>
             <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -53,205 +53,205 @@
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo1.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 1</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo2.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 2</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo3.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 3</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo4.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 4</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo5.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 5</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo6.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 6</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo7.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 7</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo8.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 8</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo9.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 9</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo10.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 10</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo11.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 11</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo12.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 12</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo13.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 13</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo14.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 14</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo15.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 15</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo16.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 16</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo17.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 17</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo18.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 18</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo19.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 19</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo20.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 20</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo21.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 21</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo22.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 22</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo23.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 23</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo24.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 24</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo25.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 25</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo26.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 26</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo27.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 27</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo28.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 28</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo29.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 29</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo30.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 30</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo31.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 31</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo32.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 32</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo33.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 33</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo34.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 34</span>
                             </a>
                           </li>
@@ -365,87 +365,87 @@
                       <li class="mega-menu-content">
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                               <span>About</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                               <span>Blog</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                               <span>Call to Action</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                               <span>Clients</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                               <span>Contact</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                               <span>Facts</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                               <span>FAQ</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                               <span>Features</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                               <span>Footer</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                               <span>Hero</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                               <span>Misc</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                               <span>Navbar</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                               <span>Portfolio</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                               <span>Pricing</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                               <span>Process</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                               <span>Team</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                               <span>Testimonials</span>
                             </a>
                           </li>
@@ -573,7 +573,7 @@
       <div class="container pt-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
         <div class="flex flex-wrap mx-[-15px] !mt-[-50px] xl:!mt-0 lg:!mt-0 items-center">
           <div class="md:w-8/12 lg:w-5/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full flex !relative !mx-auto" data-cues="slideInDown" data-group="header">
-            <div class="img-mask mask-1"><img src="assets/img/photos/about17.jpg" alt="image"></div>
+            <div class="img-mask mask-1"><img src="../assets/img/photos/about17.jpg" alt="image"></div>
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !absolute" style="bottom: 10%; right: 2%;">
               <div class="card-body py-4 px-5">
                 <div class="flex flex-row items-center">
@@ -694,7 +694,7 @@
               </div>
               <!-- /column -->
               <div class="xl:w-7/12 xl:!ml-[8.33333333%] lg:w-7/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end">
-                <figure class="m-0 p-0"><img class="max-w-full h-auto" src="assets/img/photos/f1.png" alt="image"></figure>
+                <figure class="m-0 p-0"><img class="max-w-full h-auto" src="../assets/img/photos/f1.png" alt="image"></figure>
               </div>
               <!-- /column -->
             </div>
@@ -714,7 +714,7 @@
               </div>
               <!-- /column -->
               <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px]">
-                <figure class="m-0 p-0"><img class="max-w-full h-auto" src="assets/img/photos/f2.png" alt="image"></figure>
+                <figure class="m-0 p-0"><img class="max-w-full h-auto" src="../assets/img/photos/f2.png" alt="image"></figure>
               </div>
               <!-- /column -->
             </div>
@@ -733,7 +733,7 @@
                 <a href="#" class="more hover link-leaf !mb-8">See Project</a>
               </div>
               <!--/.card-body -->
-              <img class="card-img-bottom" src="assets/img/photos/f3.png" alt="image">
+              <img class="card-img-bottom" src="../assets/img/photos/f3.png" alt="image">
             </div>
             <!--/.card -->
           </div>
@@ -747,7 +747,7 @@
                 <a href="#" class="more hover link-pink !mb-8">See Project</a>
               </div>
               <!--/.card-body -->
-              <img class="card-img-bottom" src="assets/img/photos/f4.png" alt="image">
+              <img class="card-img-bottom" src="../assets/img/photos/f4.png" alt="image">
             </div>
             <!--/.card -->
           </div>
@@ -837,8 +837,8 @@
       <path class="fill-none stroke-[#d16b86] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo17.html b/public/html/demo17.html
index 928e06b..8b3a82c 100644
--- a/public/html/demo17.html
+++ b/public/html/demo17.html
@@ -11,11 +11,11 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/navy.css">
+  <link rel="stylesheet" href="../assets/css/colors/navy.css">
   <style>
     .accordion-wrapper .card-header button{
       color: #343f52;
@@ -31,7 +31,7 @@
           <div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row !flex-nowrap w-full justify-between items-center">
             <div class="navbar-brand w-full">
               <a href='index.html'>
-                <img src="assets/img/truncgil-yatay.svg" alt="image">
+                <img src="../assets/img/truncgil-yatay.svg" alt="image">
               </a>
             </div>
             <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -48,205 +48,205 @@
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo1.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 1</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo2.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 2</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo3.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 3</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo4.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 4</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo5.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 5</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo6.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 6</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo7.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 7</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo8.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 8</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo9.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 9</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo10.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 10</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo11.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 11</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo12.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 12</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo13.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 13</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo14.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 14</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo15.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 15</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo16.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 16</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo17.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 17</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo18.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 18</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo19.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 19</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo20.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 20</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo21.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 21</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo22.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 22</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo23.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 23</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo24.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 24</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo25.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 25</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo26.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 26</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo27.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 27</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo28.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 28</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo29.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 29</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo30.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 30</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo31.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 31</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo32.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 32</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo33.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 33</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo34.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 34</span>
                             </a>
                           </li>
@@ -360,87 +360,87 @@
                       <li class="mega-menu-content">
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                               <span>About</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                               <span>Blog</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                               <span>Call to Action</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                               <span>Clients</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                               <span>Contact</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                               <span>Facts</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                               <span>FAQ</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                               <span>Features</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                               <span>Footer</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                               <span>Hero</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                               <span>Misc</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                               <span>Navbar</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                               <span>Portfolio</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                               <span>Pricing</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                               <span>Process</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                               <span>Team</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                               <span>Testimonials</span>
                             </a>
                           </li>
@@ -580,7 +580,7 @@
         <!-- /.row -->
       </div>
       <!-- /.container -->
-      <figure class="absoute" style="bottom: 0; left: 0; z-index: 2;"><img src="assets/img/photos/bg11.jpg" alt="image"></figure>
+      <figure class="absoute" style="bottom: 0; left: 0; z-index: 2;"><img src="../assets/img/photos/bg11.jpg" alt="image"></figure>
     </section>
     <!-- /section -->
     <section class="wrapper  bg-[rgba(246,247,249,1)] ">
@@ -692,7 +692,7 @@
             <!-- /.row -->
             <div class="card !bg-[rgba(246,247,249)] !mb-[4.5rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
               <div class="flex flex-wrap mx-0">
-                <div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start bg-cover bg-[center_center] bg-no-repeat bg-scroll relative z-0 xl:rounded-tl-[0.4rem] xl:rounded-tr-none xl:rounded-br-none xl:rounded-bl-[0.4rem] lg:rounded-tl-[0.4rem] lg:rounded-tr-none lg:rounded-br-none lg:rounded-bl-[0.4rem] md:min-h-[25rem] max-md:min-h-[25rem]" data-image-src="assets/img/photos/tm1.jpg">
+                <div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start bg-cover bg-[center_center] bg-no-repeat bg-scroll relative z-0 xl:rounded-tl-[0.4rem] xl:rounded-tr-none xl:rounded-br-none xl:rounded-bl-[0.4rem] lg:rounded-tl-[0.4rem] lg:rounded-tr-none lg:rounded-br-none lg:rounded-bl-[0.4rem] md:min-h-[25rem] max-md:min-h-[25rem]" data-image-src="../assets/img/photos/tm1.jpg">
                 </div>
                 <!--/column -->
                 <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
@@ -763,7 +763,7 @@
                 <div class="swiper-wrapper">
                   <div class="swiper-slide">
                     <article>
-                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                         </figcaption>
@@ -786,7 +786,7 @@
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
                     <article>
-                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                         </figcaption>
@@ -809,7 +809,7 @@
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
                     <article>
-                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                         </figcaption>
@@ -832,7 +832,7 @@
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
                     <article>
-                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b7.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                         </figcaption>
@@ -861,7 +861,7 @@
             <hr class="!my-[4.5rem] xl:!my-[6rem] lg:!my-[6rem] md:!my-[6rem]">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
               <div class="md:w-8/12 xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full lg:!order-2 xl:!order-2">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/about24.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about24.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
@@ -891,7 +891,7 @@
             <!--/.row -->
             <div class="flex flex-wrap mx-[-15px] !mt-[-50px] xl:mx-[-35px] lg:mx-[-20px] !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem] items-center">
               <div class="md:w-8/12 xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!px-[35px] lg:!px-[20px] max-w-full">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/about25.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about25.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!px-[35px] lg:!px-[20px] max-w-full">
@@ -946,7 +946,7 @@
               <!--/column -->
             </div>
             <!--/.row -->
-            <div class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-0" data-image-src="assets/img/map.png">
+            <div class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-0" data-image-src="../assets/img/map.png">
               <div class="container xl:!py-[8rem] lg:!py-[8rem] md:!py-[6rem]">
                 <div class="flex flex-wrap mx-[-15px]">
                   <div class="xl:w-11/12 xxl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -1044,8 +1044,8 @@
       <path class="fill-none stroke-[#343f52] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo18.html b/public/html/demo18.html
index 95b1445..a397283 100644
--- a/public/html/demo18.html
+++ b/public/html/demo18.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/grape.css">
-  <link rel="preload" href="assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/grape.css">
+  <link rel="preload" href="../assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
 </head>
 
 <body class="!font-urbanist !text-[.85rem]">
@@ -26,7 +26,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -43,205 +43,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -355,87 +355,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -559,7 +559,7 @@
     <!-- /header -->
     <section class="wrapper !bg-[#ffffff]">
       <div class="container-card">
-        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 !mt-2 !mb-5 [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)] xxl:!rounded-[.8rem] rounded-0" data-image-src="assets/img/photos/bg22.png">
+        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 !mt-2 !mb-5 [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)] xxl:!rounded-[.8rem] rounded-0" data-image-src="../assets/img/photos/bg22.png">
           <div class="card-body py-[4.5rem] px-0">
             <div class="container">
               <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center text-center lg:text-left xl:text-left">
@@ -570,7 +570,7 @@
                 </div>
                 <!--/column -->
                 <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px] max-w-full">
-                  <img class="max-w-full h-auto !mb-[-8rem]" src="assets/img/illustrations/3d6.png" data-cue="fadeIn" data-delay="300" alt="image">
+                  <img class="max-w-full h-auto !mb-[-8rem]" src="../assets/img/illustrations/3d6.png" data-cue="fadeIn" data-delay="300" alt="image">
                 </div>
                 <!--/column -->
               </div>
@@ -672,7 +672,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] !mb-[5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]  items-center">
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/3d2.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/3d2.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]">
@@ -704,7 +704,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] items-center">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:!order-2 lg:!order-2 !relative !mt-[50px]">
-            <figure class="rounded-[0.4rem]"><img class="max-w-full h-auto rounded-[0.4rem]" src="assets/img/photos/about27.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem]"><img class="max-w-full h-auto rounded-[0.4rem]" src="../assets/img/photos/about27.jpg" alt="image"></figure>
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !absolute xl:block lg:block md:block max-sm:!hidden" style="top: 15%; left: -7%">
               <div class="card-body py-4 px-5">
                 <div class="flex flex-row items-center">
@@ -749,7 +749,7 @@
     <!-- /section -->
     <section class="wrapper !bg-[#ffffff]">
       <div class="container-card">
-        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 pb-20 [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)] xxl:rounded-[.8rem] rounded-0" data-image-src="assets/img/photos/bg22.png">
+        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 pb-20 [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)] xxl:rounded-[.8rem] rounded-0" data-image-src="../assets/img/photos/bg22.png">
           <div class="card-body py-[4.5rem] px-0">
             <div class="container">
               <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] xl:!mt-0 lg:!mt-0">
@@ -884,7 +884,7 @@
                 <div class="swiper-wrapper">
                   <div class="swiper-slide">
                     <article>
-                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                         </figcaption>
@@ -907,7 +907,7 @@
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
                     <article>
-                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                         </figcaption>
@@ -930,7 +930,7 @@
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
                     <article>
-                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                         </figcaption>
@@ -953,7 +953,7 @@
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
                     <article>
-                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                      <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b7.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                         </figcaption>
@@ -983,15 +983,15 @@
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[80px]">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g12.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g12.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !self-end !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g13.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g13.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="assets/img/photos/g11.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="../assets/img/photos/g11.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -1064,7 +1064,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] !mb-[5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]  items-center">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/3d3.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/3d3.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]">
@@ -1109,7 +1109,7 @@
   <!-- /.content-wrapper -->
   <footer class="!bg-[#ffffff] ">
     <div class="container-card">
-      <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 !mb-[4.5rem] [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)] xxl:rounded-[.8rem] rounded-0" data-image-src="assets/img/photos/bg22.png">
+      <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 !mb-[4.5rem] [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)] xxl:rounded-[.8rem] rounded-0" data-image-src="../assets/img/photos/bg22.png">
         <div class="card-body py-[4.5rem] px-0">
           <div class="container">
             <div class="flex flex-wrap mx-[-15px] !text-center">
@@ -1135,7 +1135,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block">All rights reserved.</p>
             <nav class="nav social">
               <a class="!text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-[#5daed5] text-[1rem]"></i></a>
@@ -1212,8 +1212,8 @@
       <path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo19.html b/public/html/demo19.html
index 4e5eaaf..c49e577 100644
--- a/public/html/demo19.html
+++ b/public/html/demo19.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/violet.css">
-  <link rel="preload" href="assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/violet.css">
+  <link rel="preload" href="../assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .nav-tabs.nav-tabs-bg .nav-link.active, .nav-tabs.nav-tabs-bg .nav-link:hover {
     box-shadow: 0 0.25rem 1.75rem rgba(30,34,40,.07);
@@ -44,8 +44,8 @@
         <div class="container justify-between items-center">
           <div class="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
             <div class="navbar-brand"><a href='index.html'>
-                <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-                <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+                <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+                <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
               </a></div>
             <div class="navbar-other !ml-auto">
               <ul class="navbar-nav flex-row items-center">
@@ -61,8 +61,8 @@
           <div class="navbar-collapse-wrapper flex flex-row items-center w-full">
             <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
               <div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!px-[5rem] xl:!order-1 xl:!px-[5rem] p-[1.5rem] !flex items-center justify-between flex-row">
-                <a class='transition-none hidden lg:!flex xl:!flex' href='index.html'><img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-                  <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image"></a>
+                <a class='transition-none hidden lg:!flex xl:!flex' href='index.html'><img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+                  <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image"></a>
                   
                   
               </div>
@@ -75,205 +75,205 @@
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo1.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 1</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo2.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 2</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo3.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 3</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo4.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 4</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo5.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 5</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo6.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 6</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo7.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 7</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo8.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 8</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo9.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 9</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo10.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 10</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo11.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 11</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo12.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 12</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo13.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 13</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo14.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 14</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo15.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 15</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo16.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 16</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo17.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 17</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo18.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 18</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo19.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 19</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo20.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 20</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo21.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 21</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo22.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 22</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo23.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 23</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo24.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 24</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo25.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 25</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo26.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 26</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo27.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 27</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo28.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 28</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo29.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 29</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo30.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 30</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo31.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 31</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo32.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 32</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo33.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 33</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo34.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 34</span>
                             </a>
                           </li>
@@ -392,87 +392,87 @@
                       <li class="mega-menu-content">
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                               <span>About</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                               <span>Blog</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                               <span>Call to Action</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                               <span>Clients</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                               <span>Contact</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                               <span>Facts</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                               <span>FAQ</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                               <span>Features</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                               <span>Footer</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                               <span>Hero</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                               <span>Misc</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                               <span>Navbar</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                               <span>Portfolio</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                               <span>Pricing</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                               <span>Process</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                               <span>Team</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                               <span>Testimonials</span>
                             </a>
                           </li>
@@ -695,7 +695,7 @@
           <div class="tab-pane fade show active" id="tab2-1">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
-                <figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se5.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="../assets/img/photos/se5.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
@@ -716,7 +716,7 @@
           <div class="tab-pane fade" id="tab2-2">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
-                <figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se6.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="../assets/img/photos/se6.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
@@ -737,7 +737,7 @@
           <div class="tab-pane fade" id="tab2-3">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
-                <figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se7.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="../assets/img/photos/se7.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
@@ -868,7 +868,7 @@
           <div class="swiper">
             <div class="swiper-wrapper">
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd7.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd7.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project.html'>Cras Fermentum Sem</a></h2>
@@ -880,7 +880,7 @@
               </div>
               <!--/.swiper-slide -->
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd8.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd8.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project2.html'>Mollis Ipsum Mattis</a></h2>
@@ -892,7 +892,7 @@
               </div>
               <!--/.swiper-slide -->
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd9.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd9.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project3.html'>Ipsum Ultricies Cursus</a></h2>
@@ -904,7 +904,7 @@
               </div>
               <!--/.swiper-slide -->
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd10.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd10.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project.html'>Inceptos Euismod Egestas</a></h2>
@@ -916,7 +916,7 @@
               </div>
               <!--/.swiper-slide -->
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd11.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd11.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project2.html'>Ipsum Mollis Vulputate</a></h2>
@@ -928,7 +928,7 @@
               </div>
               <!--/.swiper-slide -->
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd12.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd12.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project3.html'>Porta Ornare Cras</a></h2>
@@ -949,15 +949,15 @@
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[80px]">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="assets/img/photos/g8.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="../assets/img/photos/g8.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g9.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g9.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g10.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g10.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -1050,7 +1050,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block">All rights reserved.</p>
             <nav class="nav social">
               <a class="!text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-[#5daed5] text-[1rem]"></i></a>
@@ -1128,8 +1128,8 @@
       <path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo2.html b/public/html/demo2.html
index fb5eef6..3caa071 100644
--- a/public/html/demo2.html
+++ b/public/html/demo2.html
@@ -11,10 +11,10 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
-  <link rel="preload" href="assets/css/fonts/dm.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
+  <link rel="preload" href="../assets/css/fonts/dm.css" as="style" onload="this.rel='stylesheet'">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -42,7 +42,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -59,205 +59,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -371,87 +371,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -581,7 +581,7 @@
           <div class="md:w-8/12 md:!ml-[16.66666667%] lg:w-6/12 lg:!ml-[8.33333333%] xl:w-6/12 xl:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] lg:px-0 xl:!px-[20px] max-w-full !relative lg:!order-2 xl:!order-2" data-cue="zoomIn">
             <div class="shape bg-dot primary rellax !w-[7rem] !h-[9rem] absolute z-[1] opacity-50 !bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -1.7rem; left: -1.5rem;"></div>
             <div class="shape rounded !bg-[#edf2fc] rellax xl:block lg:block md:block absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; right: -0.8rem; width: 85%; height: 90%;"></div>
-            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="assets/img/photos/about7.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about7.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] lg:px-0 xl:!px-[20px] max-w-full xl:!mt-[-2.5rem] lg:!mt-[-2.5rem] !mt-[4rem] text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
@@ -598,27 +598,27 @@
         <div class="xl:!px-[1.25rem] lg:!px-[1.25rem] !mb-[4.5rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
           <div class="flex flex-wrap mx-0 md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-40px] items-center">
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] !px-[15px] w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c1.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c1.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] !px-[15px] w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c2.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c2.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] !px-[15px] w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c3.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c3.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] !px-[15px] w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c4.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c4.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] !px-[15px] w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c5.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c5.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] !px-[15px] w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c6.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c6.png" alt="image"></figure>
             </div>
             <!--/column -->
           </div>
@@ -669,7 +669,7 @@
             <div class="shape bg-line red !rounded-[50%] rellax !w-[8rem] !h-[8rem] absolute z-[1] opacity-50 bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -2.2rem; left: -2.4rem;"></div>
 
             <div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
-            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="assets/img/photos/about9.jpg" alt="image"></figure>
+            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="../assets/img/photos/about9.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="lg:w-5/12 xl:w-4/12 xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !mt-[80px]">
@@ -721,31 +721,31 @@
           <div class="swiper">
             <div class="swiper-wrapper">
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/pp10.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/pp10.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/pp11.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/pp11.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/pp12.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/pp12.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/pp13.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/pp13.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/pp14.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/pp14.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/pp15.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/pp15.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/pp16.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/pp16.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
             </div>
@@ -759,9 +759,9 @@
       <div class="container">
         <div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] items-center !mb-[4.5rem] md:!mb-[7rem] lg:!mb-[9rem] xl:!mb-[9rem]">
           <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !relative !mt-[80px]">
-            <a href="assets/media/movie.mp4" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#3f78e0] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#3f78e0] after:[animation-delay:.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
+            <a href="../assets/media/movie.mp4" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#3f78e0] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#3f78e0] after:[animation-delay:.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
             <div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
-            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="assets/img/photos/about12.jpg" alt="image"></figure>
+            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="../assets/img/photos/about12.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] !mt-[80px]">
@@ -802,7 +802,7 @@
               <div class="swiper">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide">
-                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t1.jpg" alt="image">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t1.jpg" alt="image">
                     <h4 class="!mb-1">Cory Zamora</h4>
                     <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Marketing Specialist</div>
                     <p class="!mb-2">Etiam porta sem magna malesuada mollis.</p>
@@ -815,7 +815,7 @@
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
-                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t2.jpg" alt="image">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t2.jpg" alt="image">
                     <h4 class="!mb-1">Coriss Ambady</h4>
                     <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Financial Analyst</div>
                     <p class="!mb-2">Aenean eu leo quam. Pellentesque ornare lacinia.</p>
@@ -828,7 +828,7 @@
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
-                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t3.jpg" alt="image">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t3.jpg" alt="image">
                     <h4 class="!mb-1">Nikolas Brooten</h4>
                     <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Sales Manager</div>
                     <p class="!mb-2">Donec ornare elit quam porta gravida at eget.</p>
@@ -841,7 +841,7 @@
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
-                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t4.jpg" alt="image">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t4.jpg" alt="image">
                     <h4 class="!mb-1">Jackie Sanders</h4>
                     <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Investment Planner</div>
                     <p class="!mb-2">Nullam risus eget urna mollis ornare vel eu leo.</p>
@@ -854,7 +854,7 @@
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide">
-                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t5.jpg" alt="image">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t5.jpg" alt="image">
                     <h4 class="!mb-1">Tina Geller</h4>
                     <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Assistant Buyer</div>
                     <p class="!mb-2">Vivamus sagittis lacus vel augue laoreet rutrum.</p>
@@ -879,7 +879,7 @@
         <div class="card !bg-[#edf2fc]">
           <div class="card-body xl:!p-[2.5rem] lg:!p-[2.5rem] md:!p-[2.5rem] xxl:!py-24 p-[40px] !relative">
             <div class="absolute hidden lg:block xl:block" style="bottom:0; left:10%; width: 28%; z-index:2">
-              <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/co2.png" alt="image"></figure>
+              <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/co2.png" alt="image"></figure>
             </div>
             <div class="flex flex-wrap max-md:mx-[-15px] xl:mx-[-35px] mx-0 !text-center">
               <div class="lg:w-7/12 lg:!ml-[41.66666667%] xl:w-6/12 xl:!ml-[41.66666667%] w-full flex-[0_0_auto] max-md:!px-[15px] xl:!px-[35px] px-0 max-w-full">
@@ -912,7 +912,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block">All rights reserved.</p>
             <nav class="nav social">
               <a class="!text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-[#5daed5] text-[1rem]"></i></a>
@@ -990,8 +990,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo20.html b/public/html/demo20.html
index c254a86..6d5222a 100644
--- a/public/html/demo20.html
+++ b/public/html/demo20.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/purple.css">
-  <link rel="preload" href="assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/purple.css">
+  <link rel="preload" href="../assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .language-select .nav-link{
       color: #ffffff;
@@ -53,8 +53,8 @@
           <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
             <div class="navbar-brand w-full">
               <a href='index.html'>
-                <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-                <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+                <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+                <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
               </a>
             </div>
             <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -71,205 +71,205 @@
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo1.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 1</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo2.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 2</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo3.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 3</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo4.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 4</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo5.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 5</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo6.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 6</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo7.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 7</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo8.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 8</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo9.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 9</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo10.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 10</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo11.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 11</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo12.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 12</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo13.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 13</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo14.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 14</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo15.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 15</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo16.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 16</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo17.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 17</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo18.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 18</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo19.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 19</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo20.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 20</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo21.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 21</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo22.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 22</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo23.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 23</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo24.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 24</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo25.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 25</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo26.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 26</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo27.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 27</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo28.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 28</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo29.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 29</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo30.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 30</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo31.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 31</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo32.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 32</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo33.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 33</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo34.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 34</span>
                             </a>
                           </li>
@@ -383,87 +383,87 @@
                       <li class="mega-menu-content">
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                               <span>About</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                               <span>Blog</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                               <span>Call to Action</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                               <span>Clients</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                               <span>Contact</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                               <span>Facts</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                               <span>FAQ</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                               <span>Features</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                               <span>Footer</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                               <span>Hero</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                               <span>Misc</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                               <span>Navbar</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                               <span>Portfolio</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                               <span>Pricing</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                               <span>Process</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                               <span>Team</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                               <span>Testimonials</span>
                             </a>
                           </li>
@@ -628,7 +628,7 @@
       </header>
       <!-- /header -->
       <section class="video-wrapper relative overflow-hidden bg-overlay bg-overlay-gradient !px-0 !mt-0 min-h-[80vh] xl:rounded-[1rem] lg:rounded-[1rem] md:rounded-[1rem]">
-        <video poster="assets/img/photos/movie2.jpg" src="assets/media/movie2.mp4" autoplay loop playsinline muted></video>
+        <video poster="../assets/img/photos/movie2.jpg" src="../assets/media/movie2.mp4" autoplay loop playsinline muted></video>
         <div class="video-content absolute z-[2] w-full h-full flex items-center justify-center text-center flex-col left-0 top-0">
           <div class="container !text-center">
             <div class="flex flex-wrap mx-[-15px]">
@@ -656,7 +656,7 @@
           <!-- /.row -->
           <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
             <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full">
-              <figure class="!rounded-[.4rem]  !mb-0"><img class="max-w-full h-auto" src="assets/img/illustrations/ui4.png" alt="image"></figure>
+              <figure class="!rounded-[.4rem]  !mb-0"><img class="max-w-full h-auto" src="../assets/img/illustrations/ui4.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full !ml-auto">
@@ -674,7 +674,7 @@
           <!--/.row -->
           <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
             <div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full lg:!order-2 xl:!order-2 !ml-auto">
-              <figure class="!rounded-[.4rem]  !mb-0"><img class="max-w-full h-auto" src="assets/img/illustrations/ui1.png" alt="image"></figure>
+              <figure class="!rounded-[.4rem]  !mb-0"><img class="max-w-full h-auto" src="../assets/img/illustrations/ui1.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full">
@@ -692,7 +692,7 @@
           <!--/.row -->
           <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center">
             <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full">
-              <figure class="!rounded-[.4rem]  !mb-0"><img class="max-w-full h-auto" src="assets/img/illustrations/ui5.png" alt="image"></figure>
+              <figure class="!rounded-[.4rem]  !mb-0"><img class="max-w-full h-auto" src="../assets/img/illustrations/ui5.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full !ml-auto">
@@ -718,14 +718,14 @@
             <div class="lg:w-10/12 xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
               <div class="!relative">
                 <div class="shape pale-pink rellax !w-[8rem] !h-[8rem] !absolute z-[1]" data-rellax-speed="1" style="top: 1rem; left: -4.2rem;">
-                  <img src="assets/img/svg/hex.svg" class="svg-inject icon-svg !w-full !h-full" alt="image">
+                  <img src="../assets/img/svg/hex.svg" class="svg-inject icon-svg !w-full !h-full" alt="image">
                 </div>
                 <div class="shape pale-purple rellax !w-[8rem] !h-[8rem] !absolute z-[1]" data-rellax-speed="1" style="bottom: 2rem; right: -3.5rem;">
-                  <img src="assets/img/svg/circle.svg" class="svg-inject icon-svg !w-full !h-full" alt="image">
+                  <img src="../assets/img/svg/circle.svg" class="svg-inject icon-svg !w-full !h-full" alt="image">
                 </div>
-                <video poster="assets/img/photos/movie.jpg" class="player relative z-[2] rounded-[0.4rem]" playsinline controls preload="none">
-                  <source src="assets/media/movie.mp4" type="video/mp4">
-                  <source src="assets/media/movie.html" type="video/webm">
+                <video poster="../assets/img/photos/movie.jpg" class="player relative z-[2] rounded-[0.4rem]" playsinline controls preload="none">
+                  <source src="../assets/media/movie.mp4" type="video/mp4">
+                  <source src="../assets/media/movie.html" type="video/webm">
                 </video>
               </div>
             </div>
@@ -775,7 +775,7 @@
         <div class="itemgrid grid-view projects-masonry">
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
-              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd7.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd7.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <h2 class="post-title h3 !text-[1.1rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project.html'>Cras Fermentum Sem</a></h2>
@@ -787,7 +787,7 @@
             </div>
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
-              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd8.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd8.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <h2 class="post-title h3 !text-[1.1rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project2.html'>Mollis Ipsum Mattis</a></h2>
@@ -799,7 +799,7 @@
             </div>
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
-              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd9.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd9.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <h2 class="post-title h3 !text-[1.1rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project3.html'>Ipsum Ultricies Cursus</a></h2>
@@ -811,7 +811,7 @@
             </div>
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
-              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd10.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd10.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <h2 class="post-title h3 !text-[1.1rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project.html'>Inceptos Euismod Egestas</a></h2>
@@ -823,7 +823,7 @@
             </div>
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
-              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd11.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd11.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <h2 class="post-title h3 !text-[1.1rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project2.html'>Ipsum Mollis Vulputate</a></h2>
@@ -835,7 +835,7 @@
             </div>
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
-              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd12.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+              <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd12.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <h2 class="post-title h3 !text-[1.1rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project3.html'>Porta Ornare Cras</a></h2>
@@ -869,35 +869,35 @@
             <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px] xl:!mt-0 lg:!mt-0">
               <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] !mt-[-70px]">
                 <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z1.png" alt="image"></figure>
+                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z1.png" alt="image"></figure>
                 </div>
                 <!--/column -->
                 <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z2.png" alt="image"></figure>
+                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z2.png" alt="image"></figure>
                 </div>
                 <!--/column -->
                 <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z3.png" alt="image"></figure>
+                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z3.png" alt="image"></figure>
                 </div>
                 <!--/column -->
                 <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z4.png" alt="image"></figure>
+                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z4.png" alt="image"></figure>
                 </div>
                 <!--/column -->
                 <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z5.png" alt="image"></figure>
+                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z5.png" alt="image"></figure>
                 </div>
                 <!--/column -->
                 <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z6.png" alt="image"></figure>
+                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z6.png" alt="image"></figure>
                 </div>
                 <!--/column -->
                 <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z7.png" alt="image"></figure>
+                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z7.png" alt="image"></figure>
                 </div>
                 <!--/column -->
                 <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
-                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="assets/img/brands/z8.png" alt="image"></figure>
+                  <figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z8.png" alt="image"></figure>
                 </div>
                 <!--/column -->
               </div>
@@ -914,8 +914,8 @@
         <div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
           <div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] items-center !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
             <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-sm:!mt-[50px] !mt-[80px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px] max-w-full !relative">
-            <a href="assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#ffffff] after:!bg-[#ffffff] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:[animation-delay:0.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)] !text-[#262b32]"></i></a>
-            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="assets/img/photos/about12.jpg" alt="image"></figure>
+            <a href="../assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#ffffff] after:!bg-[#ffffff] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:[animation-delay:0.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)] !text-[#262b32]"></i></a>
+            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="../assets/img/photos/about12.jpg" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-sm:!mt-[50px] !mt-[80px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px] max-w-full">
@@ -1008,7 +1008,7 @@
             <!-- /column -->
           </div>
           <!-- /.row -->
-          <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/about26.png" alt="image"></figure>
+          <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/about26.png" alt="image"></figure>
         </div>
         <!-- /.container -->
       </section>
@@ -1020,7 +1020,7 @@
         <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
           <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
             <div class="widget !text-[#cacaca]">
-              <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+              <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
               <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
               <nav class="nav social social-white">
                 <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1099,8 +1099,8 @@
       <path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo21.html b/public/html/demo21.html
index e908e9b..56e0ad7 100644
--- a/public/html/demo21.html
+++ b/public/html/demo21.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/sky.css">
-  <link rel="preload" href="assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/sky.css">
+  <link rel="preload" href="../assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .swiper-container.nav-color .swiper-button.swiper-button-disabled, .swiper-container.nav-color .swiper-slide figure .item-link.swiper-button-disabled {
     background: #5eb9f0b3 !important;
@@ -56,7 +56,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -73,205 +73,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -385,87 +385,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -585,7 +585,7 @@
       <div class="container pt-10 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 !text-center">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] xl:!mt-0 !mb-[4.5rem] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] xl:!mt-0 max-w-full xl:!order-2 lg:!order-2">
-            <figure class="m-0 p-0"><img class="img-auto" src="assets/img/illustrations/i21.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="img-auto" src="../assets/img/illustrations/i21.png" alt="image"></figure>
           </div>
           <!-- /column -->
           <div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-5/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] xl:!mt-0 max-w-full text-center lg:text-left xl:text-left">
@@ -599,31 +599,31 @@
         <p class="text-center !mb-8">Trusted by over 2K+ clients across the world</p>
         <div class="flex flex-wrap mx-[-15px] row-cols-4 row-cols-md-4 row-cols-lg-7 row-cols-xl-7 !mt-[-50px] !mb-2 items-center justify-center">
           <div class="w-1/4 xl:w-[14.2857142857%] lg:w-[14.2857142857%] md:w-1/4 flex-[0_0_auto] !px-[15px] !mt-[50px] max-w-full">
-            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="assets/img/brands/c1.png" alt="image">
+            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="../assets/img/brands/c1.png" alt="image">
           </div>
           <!--/column -->
           <div class="w-1/4 xl:w-[14.2857142857%] lg:w-[14.2857142857%] md:w-1/4 flex-[0_0_auto] !px-[15px] !mt-[50px] max-w-full">
-            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="assets/img/brands/c2.png" alt="image">
+            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="../assets/img/brands/c2.png" alt="image">
           </div>
           <!--/column -->
           <div class="w-1/4 xl:w-[14.2857142857%] lg:w-[14.2857142857%] md:w-1/4 flex-[0_0_auto] !px-[15px] !mt-[50px] max-w-full">
-            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="assets/img/brands/c3.png" alt="image">
+            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="../assets/img/brands/c3.png" alt="image">
           </div>
           <!--/column -->
           <div class="w-1/4 xl:w-[14.2857142857%] lg:w-[14.2857142857%] md:w-1/4 flex-[0_0_auto] !px-[15px] !mt-[50px] max-w-full">
-            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="assets/img/brands/c4.png" alt="image">
+            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="../assets/img/brands/c4.png" alt="image">
           </div>
           <!--/column -->
           <div class="w-1/4 xl:w-[14.2857142857%] lg:w-[14.2857142857%] md:w-1/4 flex-[0_0_auto] !px-[15px] !mt-[50px] max-w-full">
-            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="assets/img/brands/c5.png" alt="image">
+            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="../assets/img/brands/c5.png" alt="image">
           </div>
           <!--/column -->
           <div class="w-1/4 xl:w-[14.2857142857%] lg:w-[14.2857142857%] md:w-1/4 flex-[0_0_auto] !px-[15px] !mt-[50px] max-w-full">
-            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="assets/img/brands/c6.png" alt="image">
+            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="../assets/img/brands/c6.png" alt="image">
           </div>
           <!--/column -->
           <div class="w-1/4 xl:w-[14.2857142857%] lg:w-[14.2857142857%] md:w-1/4 flex-[0_0_auto] !px-[15px] !mt-[50px] max-w-full">
-            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="assets/img/brands/c7.png" alt="image">
+            <img  class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]" src="../assets/img/brands/c7.png" alt="image">
           </div>
           <!--/column -->
         </div>
@@ -653,7 +653,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-60px] xxl:!px-5 !text-center items-end">
           <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
             <div class="md:!px-20 lg:!px-3 xl:!px-3">
-              <figure class="!mb-6"><img class="max-w-full h-auto" src="assets/img/illustrations/i24.png" alt="image"></figure>
+              <figure class="!mb-6"><img class="max-w-full h-auto" src="../assets/img/illustrations/i24.png" alt="image"></figure>
               <h3>Web Design</h3>
               <p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget. Fusce dapibus tellus.</p>
               <a href="#" class="more hover">Learn More</a>
@@ -663,7 +663,7 @@
           <!--/column -->
           <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
             <div class="md:!px-20 lg:!px-3 xl:!px-3">
-              <figure class="!mb-6"><img class="max-w-full h-auto" src="assets/img/illustrations/i19.png" alt="image"></figure>
+              <figure class="!mb-6"><img class="max-w-full h-auto" src="../assets/img/illustrations/i19.png" alt="image"></figure>
               <h3>Graphic Design</h3>
               <p class="!mb-2">Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet. Sed posuere consectetur.</p>
               <a href="#" class="more hover">Learn More</a>
@@ -673,7 +673,7 @@
           <!--/column -->
           <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
             <div class="md:!px-20 lg:!px-3 xl:!px-3">
-              <figure class="!mb-6"><img class="max-w-full h-auto" src="assets/img/illustrations/i18.png" alt="image"></figure>
+              <figure class="!mb-6"><img class="max-w-full h-auto" src="../assets/img/illustrations/i18.png" alt="image"></figure>
               <h3>3D Animation</h3>
               <p class="!mb-2">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna scelerisque.</p>
               <a href="#" class="more hover">Learn More</a>
@@ -756,7 +756,7 @@
       <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="img-auto" src="assets/img/illustrations/i22.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="img-auto" src="../assets/img/illustrations/i22.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -862,7 +862,7 @@
           <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] xl:!mt-0 max-w-full">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="card-body flex-[1_1_auto] p-[40px]">
-                <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te1.jpg" alt="image">
+                <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te1.jpg" alt="image">
                 <h4 class="!mb-1">Coriss Ambady</h4>
                 <div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-semibold !text-[#aab0bc] !mb-2">Financial Analyst</div>
                 <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -881,7 +881,7 @@
           <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] xl:!mt-0 max-w-full">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="card-body flex-[1_1_auto] p-[40px]">
-                <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te2.jpg" alt="image">
+                <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te2.jpg" alt="image">
                 <h4 class="!mb-1">Cory Zamora</h4>
                 <div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-semibold !text-[#aab0bc] !mb-2">Marketing Specialist</div>
                 <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -900,7 +900,7 @@
           <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] xl:!mt-0 max-w-full">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="card-body flex-[1_1_auto] p-[40px]">
-                <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te3.jpg" alt="image">
+                <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te3.jpg" alt="image">
                 <h4 class="!mb-1">Nikolas Brooten</h4>
                 <div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-semibold !text-[#aab0bc] !mb-2">Sales Manager</div>
                 <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -919,7 +919,7 @@
           <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] xl:!mt-0 max-w-full">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="card-body flex-[1_1_auto] p-[40px]">
-                <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te4.jpg" alt="image">
+                <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te4.jpg" alt="image">
                 <h4 class="!mb-1">Jackie Sanders</h4>
                 <div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-semibold !text-[#aab0bc] !mb-2">Investment Planner</div>
                 <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -953,7 +953,7 @@
             <div class="swiper overflow-visible">
               <div class="swiper-wrapper">
                 <div class="swiper-slide">
-                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="assets/img/photos/sp1.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="../assets/img/photos/sp1.jpg" alt="image"></a></figure>
                   <div class="project-details flex justify-center flex-col">
                     <div class="post-header">
                       <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#5eb9f0]' href='single-project.html'>Cras Fermentum Sem</a></h2>
@@ -965,7 +965,7 @@
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide">
-                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="assets/img/photos/sp2.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="../assets/img/photos/sp2.jpg" alt="image"></a></figure>
                   <div class="project-details flex justify-center flex-col">
                     <div class="post-header">
                       <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#5eb9f0]' href='single-project.html'>Venenatis Euismod Vehicula</a></h2>
@@ -977,7 +977,7 @@
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide">
-                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="assets/img/photos/sp3.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="../assets/img/photos/sp3.jpg" alt="image"></a></figure>
                   <div class="project-details flex justify-center flex-col">
                     <div class="post-header">
                       <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#5eb9f0]' href='single-project.html'>Tortor Tellus Cursus</a></h2>
@@ -989,7 +989,7 @@
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide">
-                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="assets/img/photos/sp4.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="../assets/img/photos/sp4.jpg" alt="image"></a></figure>
                   <div class="project-details flex justify-center flex-col">
                     <div class="post-header">
                       <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#5eb9f0]' href='single-project.html'>Ridiculus Sem Parturient</a></h2>
@@ -1001,7 +1001,7 @@
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide">
-                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="assets/img/photos/sp5.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="../assets/img/photos/sp5.jpg" alt="image"></a></figure>
                   <div class="project-details flex justify-center flex-col">
                     <div class="post-header">
                       <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#5eb9f0]' href='single-project.html'>Cursus Sollicitudin Adipiscing</a></h2>
@@ -1013,7 +1013,7 @@
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide">
-                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="assets/img/photos/sp6.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] !mb-7"><a href='single-project.html'><img src="../assets/img/photos/sp6.jpg" alt="image"></a></figure>
                   <div class="project-details flex justify-center flex-col">
                     <div class="post-header">
                       <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#5eb9f0]' href='single-project.html'>Fringilla Quam Vulputate</a></h2>
@@ -1060,7 +1060,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0">
                     <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te1.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te1.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Coriss Ambady</h5>
                         <p class="!mb-0 !text-[.85rem]">Financial Analyst</p>
@@ -1080,7 +1080,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0">
                     <p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te2.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te2.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Cory Zamora</h5>
                         <p class="!mb-0 !text-[.85rem]">Marketing Specialist</p>
@@ -1100,7 +1100,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0">
                     <p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te3.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te3.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Nikolas Brooten</h5>
                         <p class="!mb-0 !text-[.85rem]">Sales Manager</p>
@@ -1120,7 +1120,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0">
                     <p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te4.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te4.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Coriss Ambady</h5>
                         <p class="!mb-0 !text-[.85rem]">Financial Analyst</p>
@@ -1140,7 +1140,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0">
                     <p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te5.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te5.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Jackie Sanders</h5>
                         <p class="!mb-0 !text-[.85rem]">Investment Planner</p>
@@ -1160,7 +1160,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0">
                     <p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te6.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te6.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Laura Widerski</h5>
                         <p class="!mb-0 !text-[.85rem]">Sales Specialist</p>
@@ -1280,7 +1280,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1358,8 +1358,8 @@
       <path class="fill-none stroke-[#54a8c7] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo22.html b/public/html/demo22.html
index cdb0f28..f3e0f6a 100644
--- a/public/html/demo22.html
+++ b/public/html/demo22.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/purple.css">
-  <link rel="preload" href="assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/purple.css">
+  <link rel="preload" href="../assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
   <style>
         .accordion-wrapper .card-header button{
       color: #747ed1;
@@ -45,8 +45,8 @@
           <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
             <div class="navbar-brand w-full">
               <a href='index.html'>
-                <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-                <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+                <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+                <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
               </a>
             </div>
             <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -63,205 +63,205 @@
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo1.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 1</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo2.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 2</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo3.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 3</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo4.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 4</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo5.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 5</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo6.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 6</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo7.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 7</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo8.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 8</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo9.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 9</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo10.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 10</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo11.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 11</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo12.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 12</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo13.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 13</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo14.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 14</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo15.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 15</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo16.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 16</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo17.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 17</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo18.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 18</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo19.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 19</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo20.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 20</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo21.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 21</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo22.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 22</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo23.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 23</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo24.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 24</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo25.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 25</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo26.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 26</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo27.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 27</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo28.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 28</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo29.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 29</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo30.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 30</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo31.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 31</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo32.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 32</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo33.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 33</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo34.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 34</span>
                             </a>
                           </li>
@@ -375,87 +375,87 @@
                       <li class="mega-menu-content">
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                               <span>About</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                               <span>Blog</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                               <span>Call to Action</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                               <span>Clients</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                               <span>Contact</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                               <span>Facts</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                               <span>FAQ</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                               <span>Features</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                               <span>Footer</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                               <span>Hero</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                               <span>Misc</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                               <span>Navbar</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                               <span>Portfolio</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                               <span>Pricing</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                               <span>Process</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                               <span>Team</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                               <span>Testimonials</span>
                             </a>
                           </li>
@@ -629,7 +629,7 @@
               <div class="md:w-9/12 lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="zoomIn" data-group="page-title" data-interval="-200" data-delay="500">
                 <h2 class="h6 uppercase !tracking-[0.05rem] !text-white !mb-5">Hello! We are Trunçgil</h2>
                 <h3 class="xl:!text-[2.7rem] !text-[calc(1.395rem_+_1.74vw)] !leading-[1.15] !text-white !mb-7">Grow your business with our marketing solutions</h3>
-                <a href="assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !relative z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff] after:[animation-delay:0.5s]" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
+                <a href="../assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !relative z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff] after:[animation-delay:0.5s]" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
               </div>
               <!-- /column -->
             </div>
@@ -700,7 +700,7 @@
           <hr class="dark my-[4.5rem] xl:!my-[7rem] lg:!my-[7rem] md:!my-[7rem]">
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
             <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-              <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i9.png" alt="image"></figure>
+              <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i9.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -732,7 +732,7 @@
           <!--/.row -->
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px]">
             <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
-              <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i12.png" alt="image"></figure>
+              <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i12.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -849,7 +849,7 @@
           <div class="swiper">
             <div class="swiper-wrapper">
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd7.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd7.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project.html'>Cras Fermentum Sem</a></h2>
@@ -861,7 +861,7 @@
               </div>
               <!--/.swiper-slide -->
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd8.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd8.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project2.html'>Mollis Ipsum Mattis</a></h2>
@@ -873,7 +873,7 @@
               </div>
               <!--/.swiper-slide -->
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd9.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd9.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project3.html'>Ipsum Ultricies Cursus</a></h2>
@@ -885,7 +885,7 @@
               </div>
               <!--/.swiper-slide -->
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd10.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd10.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project.html'>Inceptos Euismod Egestas</a></h2>
@@ -897,7 +897,7 @@
               </div>
               <!--/.swiper-slide -->
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd11.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd11.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project2.html'>Ipsum Mollis Vulputate</a></h2>
@@ -909,7 +909,7 @@
               </div>
               <!--/.swiper-slide -->
                <div class="swiper-slide group">
-                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/pd12.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/pd12.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 <div class="project-details flex justify-center flex-col">
                   <div class="post-header">
                     <h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='single-project3.html'>Porta Ornare Cras</a></h2>
@@ -1084,7 +1084,7 @@
     <!-- /.content-wrapper -->
     <footer class=" bg-[#21262c] opacity-100  section-frame xl:mx-6 xl:rounded-[1rem] lg:mx-6 lg:rounded-[1rem] md:mx-6 md:rounded-[1rem]">
       <div class="container pb-16 xl:pb-20 lg:pb-20 md:pb-20">
-        <div class="card image-wrapper bg-full bg-image bg-overlay -translate-y-2/4 xl:mx-5 lg:mx-5 md:mx-5 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)] before:rounded-[0.4rem]" data-image-src="assets/img/photos/bg27.jpg">
+        <div class="card image-wrapper bg-full bg-image bg-overlay -translate-y-2/4 xl:mx-5 lg:mx-5 md:mx-5 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)] before:rounded-[0.4rem]" data-image-src="../assets/img/photos/bg27.jpg">
           <div class="card-body p-6 flex-row text-center xl:!justify-between lg:!justify-between md:!justify-between xl:!flex xl:!items-center lg:!flex lg:!items-center xl:!p-12 lg:!p-12 md:!p-12 xl:!text-left lg:!text-left">
             <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] !mb-6 lg:!mb-0 xl:!mb-0 lg:!pr-[2.5rem] xl:!pr-[1.25rem] xxl:!pr-[8rem] !text-white">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</h3>
             <a href="#" class="btn btn-lg btn-white rounded  !mb-0 whitespace-nowrap">Join Us</a>
@@ -1096,7 +1096,7 @@
           <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
             <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
               <div class="widget !text-[#cacaca]">
-                <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+                <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
                 <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
                 <nav class="nav social social-white">
                   <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1176,8 +1176,8 @@
         <path class="fill-none stroke-[#747ed1] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
       </svg>
     </div>
-    <script src="assets/js/plugins.js"></script>
-    <script src="assets/js/theme.js"></script>
+    <script src="../assets/js/plugins.js"></script>
+    <script src="../assets/js/theme.js"></script>
   </body>
   
   
diff --git a/public/html/demo23.html b/public/html/demo23.html
index 397b048..d179079 100644
--- a/public/html/demo23.html
+++ b/public/html/demo23.html
@@ -15,12 +15,12 @@
    
    
    
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/leaf.css">
-  <link rel="preload" href="assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/leaf.css">
+  <link rel="preload" href="../assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .glightbox-clean .gclose{
       border-radius: 100% !important;
@@ -53,8 +53,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+              <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+              <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -71,205 +71,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -383,87 +383,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -645,10 +645,10 @@
         <!-- /.swiper -->
         <div class="swiper swiper-thumbs">
           <div class="swiper-wrapper">
-            <div class="swiper-slide"><img src="assets/img/photos/bg28-th.jpg" alt="image"></div>
-            <div class="swiper-slide"><img src="assets/img/photos/bg29-th.jpg" alt="image"></div>
-            <div class="swiper-slide"><img src="assets/img/photos/bg30-th.jpg" alt="image"></div>
-            <div class="swiper-slide"><img src="assets/img/photos/bg31-th.jpg" alt="image"></div>
+            <div class="swiper-slide"><img src="../assets/img/photos/bg28-th.jpg" alt="image"></div>
+            <div class="swiper-slide"><img src="../assets/img/photos/bg29-th.jpg" alt="image"></div>
+            <div class="swiper-slide"><img src="../assets/img/photos/bg30-th.jpg" alt="image"></div>
+            <div class="swiper-slide"><img src="../assets/img/photos/bg31-th.jpg" alt="image"></div>
           </div>
           <!--/.swiper-wrapper -->
         </div>
@@ -685,7 +685,7 @@
           <div class="sm:w-8/12 md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[25px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mx-auto max-lg:!mt-[40px]">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <figure class="card-img-top overlay overlay-1 group">
-                <a class=" relative block z-[3] cursor-pointer inset-0" href="#"><img class="max-w-full h-auto" src="assets/img/photos/fs1.jpg" alt="image"></a>
+                <a class=" relative block z-[3] cursor-pointer inset-0" href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs1.jpg" alt="image"></a>
                 <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                   <h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">View Gallery</h5>
                 </figcaption>
@@ -701,7 +701,7 @@
           <div class="sm:w-8/12 md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[25px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mx-auto max-lg:!mt-[40px]">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <figure class="card-img-top overlay overlay-1 group">
-                <a class=" relative block z-[3] cursor-pointer inset-0" href="#"><img class="max-w-full h-auto" src="assets/img/photos/fs2.jpg" alt="image"></a>
+                <a class=" relative block z-[3] cursor-pointer inset-0" href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs2.jpg" alt="image"></a>
                 <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                   <h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">View Gallery</h5>
                 </figcaption>
@@ -717,7 +717,7 @@
           <div class="sm:w-8/12 md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[25px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mx-auto max-lg:!mt-[40px]">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <figure class="card-img-top overlay overlay-1 group">
-                <a class=" relative block z-[3] cursor-pointer inset-0" href="#"><img class="max-w-full h-auto" src="assets/img/photos/fs3.jpg" alt="image"></a>
+                <a class=" relative block z-[3] cursor-pointer inset-0" href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs3.jpg" alt="image"></a>
                 <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                   <h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">View Gallery</h5>
                 </figcaption>
@@ -829,7 +829,7 @@
                 <div class="swiper-slide">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fc1.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fc1.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -849,7 +849,7 @@
                 <div class="swiper-slide">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fc2.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fc2.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -869,7 +869,7 @@
                 <div class="swiper-slide">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fc3.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fc3.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -889,7 +889,7 @@
                 <div class="swiper-slide">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fc4.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fc4.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -909,7 +909,7 @@
                 <div class="swiper-slide">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fc5.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fc5.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -929,7 +929,7 @@
                 <div class="swiper-slide">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fc6.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fc6.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -949,7 +949,7 @@
                 <div class="swiper-slide">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fc7.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fc7.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -997,7 +997,7 @@
       <div class="container pt-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
         <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-30px] items-center">
           <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mx-auto !mt-[30px]">
-            <div class="img-mask mask-1"><img src="assets/img/photos/about29.jpg" alt="image"></div>
+            <div class="img-mask mask-1"><img src="../assets/img/photos/about29.jpg" alt="image"></div>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[30px]">
@@ -1116,7 +1116,7 @@
                 <div class="swiper-slide">
                   <article>
                     <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="assets/img/photos/b12.jpg" alt="image"></a>
+                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="../assets/img/photos/b12.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Read More</h5>
                         </figcaption>
@@ -1149,7 +1149,7 @@
                 <div class="swiper-slide">
                   <article>
                     <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="assets/img/photos/b13.jpg" alt="image"></a>
+                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="../assets/img/photos/b13.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Read More</h5>
                         </figcaption>
@@ -1182,7 +1182,7 @@
                 <div class="swiper-slide">
                   <article>
                     <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="assets/img/photos/b14.jpg" alt="image"></a>
+                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="../assets/img/photos/b14.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Read More</h5>
                         </figcaption>
@@ -1215,7 +1215,7 @@
                 <div class="swiper-slide">
                   <article>
                     <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="assets/img/photos/b15.jpg" alt="image"></a>
+                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="../assets/img/photos/b15.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Read More</h5>
                         </figcaption>
@@ -1248,7 +1248,7 @@
                 <div class="swiper-slide">
                   <article>
                     <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="assets/img/photos/b16.jpg" alt="image"></a>
+                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="../assets/img/photos/b16.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Read More</h5>
                         </figcaption>
@@ -1281,7 +1281,7 @@
                 <div class="swiper-slide">
                   <article>
                     <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="assets/img/photos/b17.jpg" alt="image"></a>
+                      <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="../assets/img/photos/b17.jpg" alt="image"></a>
                         <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                           <h5 class="from-top !mb-0  absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Read More</h5>
                         </figcaption>
@@ -1330,7 +1330,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full max-lg:!mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
@@ -1391,8 +1391,8 @@
       <path class="fill-none stroke-[#7cb798] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo24.html b/public/html/demo24.html
index 4973f4f..69bb27b 100644
--- a/public/html/demo24.html
+++ b/public/html/demo24.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/yellow.css">
-  <link rel="preload" href="assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/yellow.css">
+  <link rel="preload" href="../assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
   <style>
     @media (min-width: 992px) {
       .navbar-nav>.nav-item>.nav-link {
@@ -53,7 +53,7 @@
       <nav class="navbar navbar-expand-lg extended extended-alt navbar-light !bg-[#ffffff]">
         <div class="container xl:!flex-col lg:!flex-col">
           <div class="topbar flex flex-row lg:!justify-center xl:!justify-center items-center">
-            <div class="navbar-brand"><a href='index.html'><img src="assets/img/truncgil-yatay.svg" alt="image"></a></div>
+            <div class="navbar-brand"><a href='index.html'><img src="../assets/img/truncgil-yatay.svg" alt="image"></a></div>
           </div>
           <!-- /.flex -->
           <div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row items-center justify-between">
@@ -178,27 +178,27 @@
             <div class="swiper overflow-visible">
               <div class="swiper-wrapper">
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/cf1.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/cf1.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf1.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf1.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/cf2.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/cf2.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf2.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf2.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/cf3.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/cf3.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf3.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf3.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/cf4.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/cf4.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf4.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf4.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/cf5.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/cf5.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf5.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf5.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/cf6.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/cf6.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf6.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf6.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
               </div>
@@ -222,7 +222,7 @@
                 <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-6">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fs4.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs4.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -235,7 +235,7 @@
                   <!-- /.card -->
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fs6.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs6.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -251,7 +251,7 @@
                 <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] xl:!mt-6 lg:!mt-6 md:!mt-6 !mb-6">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fs5.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs5.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -264,7 +264,7 @@
                   <!-- /.card -->
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                     <figure class="card-img-top overlay overlay-1 group">
-                      <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/fs7.jpg" alt="image"></a>
+                      <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs7.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
                       </figcaption>
@@ -326,7 +326,7 @@
             </div>
             <div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[-30px] isotope">
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks events">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf1-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf1.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf1-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf1.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Fringilla Nullam</h5>
                   </figcaption>
@@ -334,7 +334,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf2-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf2.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf2-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf2.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ridiculus Parturient</h5>
                   </figcaption>
@@ -342,7 +342,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks foods">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf3-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf3.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf3-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf3.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ornare Ipsum</h5>
                   </figcaption>
@@ -350,7 +350,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf4-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf4.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf4-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf4.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Nullam Mollis</h5>
                   </figcaption>
@@ -358,7 +358,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full pastries events">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf5-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf5.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf5-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf5.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Euismod Risus</h5>
                   </figcaption>
@@ -366,7 +366,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf6-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf6.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf6-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf6.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ridiculus Tristique</h5>
                   </figcaption>
@@ -374,7 +374,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods drinks">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf7-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf7.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf7-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf7.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Sollicitudin Pharetra</h5>
                   </figcaption>
@@ -382,7 +382,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full pastries">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf8-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf8.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf8-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf8.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Tristique Venenatis</h5>
                   </figcaption>
@@ -390,7 +390,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf9-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf9.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf9-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf9.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Cursus Fusce</h5>
                   </figcaption>
@@ -398,7 +398,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf10-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf10.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf10-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf10.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Consectetur Malesuada</h5>
                   </figcaption>
@@ -406,7 +406,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf11-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf11.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf11-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf11.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ultricies Aenean</h5>
                   </figcaption>
@@ -414,7 +414,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf12-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf12.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf12-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf12.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Pellentesque Commodo</h5>
                   </figcaption>
@@ -422,7 +422,7 @@
               </div>
               <!-- /.project -->
               <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks">
-                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="assets/img/photos/pf13-full.jpg" data-glightbox data-gallery="shots-group"> <img src="assets/img/photos/pf13.jpg" alt="image"></a>
+                <figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf13-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf13.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ultricies Aenean</h5>
                   </figcaption>
@@ -595,7 +595,7 @@
         <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
           <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-30px] items-center">
             <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[30px]">
-              <div class="img-mask mask-2"><img src="assets/img/photos/about30.jpg" alt="image"></div>
+              <div class="img-mask mask-2"><img src="../assets/img/photos/about30.jpg" alt="image"></div>
             </div>
             <!--/column -->
             <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[30px]">
@@ -744,7 +744,7 @@
       <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-30px]">
         <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
             <p class="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">I'm Caitlyn Trunçgil, a photographer specializing in food, drink and product photography.</p>
           </div>
           <!-- /.widget -->
@@ -805,8 +805,8 @@
       <path class="fill-none stroke-[#fab758] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo25.html b/public/html/demo25.html
index c0f7ddd..3b0b64b 100644
--- a/public/html/demo25.html
+++ b/public/html/demo25.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/pink.css">
-  <link rel="preload" href="assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/pink.css">
+  <link rel="preload" href="../assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .active>.page-link, .page-link.active,
     .plyr__control--overlaid:focus, .plyr__control--overlaid:hover{
@@ -37,7 +37,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -54,205 +54,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -366,87 +366,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -574,7 +574,7 @@
           <div class="swiper">
             <div class="swiper-wrapper">
               <div class="swiper-slide">
-                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="assets/img/photos/tb1.jpg" alt="image"></a>
+                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="../assets/img/photos/tb1.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Places</span>
                     <h2 class="post-title h3 !mt-1 !mb-3"><a href='blog-post.html'>The Best Moments in Venice</a></h2>
@@ -591,7 +591,7 @@
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="assets/img/photos/tb2.jpg" alt="image"></a>
+                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="../assets/img/photos/tb2.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Restaurants</span>
                     <h2 class="post-title h3 !mt-1 !mb-3"><a href='blog-post.html'>10 Great Places in Belgium</a></h2>
@@ -608,7 +608,7 @@
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="assets/img/photos/tb3.jpg" alt="image"></a>
+                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="../assets/img/photos/tb3.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Roadtrip</span>
                     <h2 class="post-title h3 !mt-1 !mb-3"><a href='blog-post.html'>A Dreamy Roadtrip in Australia</a></h2>
@@ -625,7 +625,7 @@
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="assets/img/photos/tb4.jpg" alt="image"></a>
+                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="../assets/img/photos/tb4.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Historic</span>
                     <h2 class="post-title h3 !mt-1 !mb-3"><a href='blog-post.html'>My Love Affair with Cappadocia</a></h2>
@@ -642,7 +642,7 @@
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="assets/img/photos/tb5.jpg" alt="image"></a>
+                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="../assets/img/photos/tb5.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Nature</span>
                     <h2 class="post-title h3 !mt-1 !mb-3"><a href='blog-post.html'>24 Hours in a Village of Valencia</a></h2>
@@ -659,7 +659,7 @@
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="assets/img/photos/tb6.jpg" alt="image"></a>
+                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="../assets/img/photos/tb6.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Architecture</span>
                     <h2 class="post-title h3 !mt-1 !mb-3"><a href='blog-post.html'>The Largest Train Station in Europe</a></h2>
@@ -676,7 +676,7 @@
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="assets/img/photos/tb7.jpg" alt="image"></a>
+                <figure class="overlay caption caption-overlay rounded  !mb-0"><a href="#"> <img src="../assets/img/photos/tb7.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Nature</span>
                     <h2 class="post-title h3 !mt-1 !mb-3"><a href='blog-post.html'>The Natural Places in Brazil</a></h2>
@@ -709,7 +709,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[25px] !mt-[40px] xl:!mt-0 lg:!mt-0">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <figure class="card-img-top overlay overlay-1 group">
-                <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/f1.jpg" alt="image"></a>
+                <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/f1.jpg" alt="image"></a>
                 <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                   <h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">Read Details</h5>
                 </figcaption>
@@ -725,7 +725,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[25px] !mt-[40px] xl:!mt-0 lg:!mt-0">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <figure class="card-img-top overlay overlay-1 group">
-                <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/f2.jpg" alt="image"></a>
+                <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/f2.jpg" alt="image"></a>
                 <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                   <h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">See Destinations</h5>
                 </figcaption>
@@ -741,7 +741,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[25px] !mt-[40px] xl:!mt-0 lg:!mt-0">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <figure class="card-img-top overlay overlay-1 group">
-                <a href="#"><img class="max-w-full h-auto" src="assets/img/photos/f3.jpg" alt="image"></a>
+                <a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/f3.jpg" alt="image"></a>
                 <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                   <h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">Follow Me</h5>
                 </figcaption>
@@ -761,7 +761,7 @@
             <div class="blog classic-view">
               <article class="post !mb-8">
                 <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                  <figure class="card-img-top overlay overlay-1 group"><a href='blog-post.html'><img src="assets/img/photos/tb8.jpg" alt="image"></a>
+                  <figure class="card-img-top overlay overlay-1 group"><a href='blog-post.html'><img src="../assets/img/photos/tb8.jpg" alt="image"></a>
                     <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                     </figcaption>
@@ -797,7 +797,7 @@
               <!-- /.post -->
               <article class="post !mb-8">
                 <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                  <figure class="card-img-top overlay overlay-1 group"><a href='blog-post.html'><img src="assets/img/photos/tb9.jpg" alt="image"></a>
+                  <figure class="card-img-top overlay overlay-1 group"><a href='blog-post.html'><img src="../assets/img/photos/tb9.jpg" alt="image"></a>
                     <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                     </figcaption>
@@ -871,7 +871,7 @@
               <div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                    <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="assets/img/photos/tb10.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="../assets/img/photos/tb10.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -906,7 +906,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                    <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="assets/img/photos/tb11.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="../assets/img/photos/tb11.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -941,7 +941,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                    <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="assets/img/photos/tb12.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="../assets/img/photos/tb12.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -976,7 +976,7 @@
                 <!-- /.post -->
                 <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                    <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="assets/img/photos/tb13.jpg" alt="image"></a>
+                    <figure class="card-img-top overlay overlay-1 group"><a href="#"> <img src="../assets/img/photos/tb13.jpg" alt="image"></a>
                       <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                         <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                       </figcaption>
@@ -1036,7 +1036,7 @@
           <aside class="xl:w-4/12 lg:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full sidebar !mt-8 lg:!px-[20px] xl:!px-[35px] xl:!mt-0 lg:!mt-0">
             <div class="widget">
               <h4 class="widget-title !mb-3">About Me</h4>
-              <figure class="!rounded-[.4rem] !mb-4"><img class="max-w-full h-auto !rounded-[.4rem]" src="assets/img/photos/f1.jpg" alt="image"></figure>
+              <figure class="!rounded-[.4rem] !mb-4"><img class="max-w-full h-auto !rounded-[.4rem]" src="../assets/img/photos/f1.jpg" alt="image"></figure>
               <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
               <nav class="nav social">
                 <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
@@ -1052,7 +1052,7 @@
               <h4 class="widget-title !mb-3">Popular Posts</h4>
               <ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
                 <li class=" clear-both block overflow-hidden">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a4.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a4.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#d16b86]' href='blog-post.html'>Magna Mollis Ultricies</a> </h6>
                     <ul class="!text-[.75rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -1063,7 +1063,7 @@
                   </div>
                 </li>
                 <li class=" clear-both block overflow-hidden !mt-4">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a5.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a5.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#d16b86]' href='blog-post.html'>Ornare Nullam Risus</a> </h6>
                     <ul class="!text-[.75rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -1074,7 +1074,7 @@
                   </div>
                 </li>
                 <li class=" clear-both block overflow-hidden !mt-4">
-                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a6.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/a6.jpg" alt="image"></a></figure>
                   <div class="!relative !ml-[4.25rem] !mb-0">
                     <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#d16b86]' href='blog-post.html'>Euismod Nullam Fusce</a> </h6>
                     <ul class="!text-[.75rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -1142,7 +1142,7 @@
             <h4 class="widget-title !text-white !mb-3">Popular Posts</h4>
             <ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
               <li class="clear-both block overflow-hidden">
-                <figure class="float-left !w-[3.5rem] !h-[3.5rem] rounded-[0.4rem]"><a href='blog-post.html'><img class="rounded-[0.4rem]" src="assets/img/photos/a4.jpg" alt="image"></a></figure>
+                <figure class="float-left !w-[3.5rem] !h-[3.5rem] rounded-[0.4rem]"><a href='blog-post.html'><img class="rounded-[0.4rem]" src="../assets/img/photos/a4.jpg" alt="image"></a></figure>
                 <div class="!relative !ml-[4.25rem] !mb-0">
                   <h6 class="!mb-2"> <a class='!text-white hover:!text-[#d16b86]' href='blog-post.html'>Magna Mollis Ultricies</a> </h6>
                   <ul class="!text-[0.75rem] !text-[#cacaca] m-0 p-0 list-none">
@@ -1152,7 +1152,7 @@
                 </div>
               </li>
               <li class="!mt-5 clear-both block overflow-hidden">
-                <figure class="float-left !w-[3.5rem] !h-[3.5rem] rounded-[0.4rem]"> <a href='blog-post.html'><img class="rounded-[0.4rem]" src="assets/img/photos/a5.jpg" alt="image"></a></figure>
+                <figure class="float-left !w-[3.5rem] !h-[3.5rem] rounded-[0.4rem]"> <a href='blog-post.html'><img class="rounded-[0.4rem]" src="../assets/img/photos/a5.jpg" alt="image"></a></figure>
                 <div class="!relative !ml-[4.25rem] !mb-0">
                   <h6 class="!mb-2"> <a class='!text-white hover:!text-[#d16b86]' href='blog-post.html'>Ornare Nullam Risus</a> </h6>
                   <ul class="!text-[0.75rem] !text-[#cacaca] m-0 p-0 list-none">
@@ -1162,7 +1162,7 @@
                 </div>
               </li>
               <li class="!mt-5 clear-both block overflow-hidden">
-                <figure class="float-left !w-[3.5rem] !h-[3.5rem] rounded-[0.4rem]"><a href='blog-post.html'><img class="rounded-[0.4rem]" src="assets/img/photos/a6.jpg" alt="image"></a></figure>
+                <figure class="float-left !w-[3.5rem] !h-[3.5rem] rounded-[0.4rem]"><a href='blog-post.html'><img class="rounded-[0.4rem]" src="../assets/img/photos/a6.jpg" alt="image"></a></figure>
                 <div class="!relative !ml-[4.25rem] !mb-0">
                   <h6 class="!mb-2"> <a class='!text-white hover:!text-[#d16b86]' href='blog-post.html'>Euismod Nullam Fusce</a> </h6>
                   <ul class="!text-[0.75rem] !text-[#cacaca] m-0 p-0 list-none">
@@ -1251,8 +1251,8 @@
       <path class="fill-none stroke-[#d16b86] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo26.html b/public/html/demo26.html
index d09ee91..5381567 100644
--- a/public/html/demo26.html
+++ b/public/html/demo26.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/grape.css">
-  <link rel="preload" href="assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/grape.css">
+  <link rel="preload" href="../assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
   <style>
 .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
     background: #e31e24 !important;
@@ -38,7 +38,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -55,205 +55,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -367,87 +367,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -574,14 +574,14 @@
           </div>
           <!--/column -->
           <div class="w-10/12 md:w-7/12 lg:w-6/12 xl:w-5/12 !mx-auto flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-5 md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px]">
-            <img class="max-w-full h-auto !mb-[-3.5rem] md:!mb-[-4.5rem] lg:!mb-[-9rem] xl:!mb-[-9rem]" src="assets/img/illustrations/3d11.png" data-cue="fadeIn" data-delay="300" alt="image">
+            <img class="max-w-full h-auto !mb-[-3.5rem] md:!mb-[-4.5rem] lg:!mb-[-9rem] xl:!mb-[-9rem]" src="../assets/img/illustrations/3d11.png" data-cue="fadeIn" data-delay="300" alt="image">
           </div>
           <!--/column -->
         </div>
         <!-- /.row -->
       </div>
       <!-- /.container -->
-      <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/clouds.png" alt="image"></figure>
+      <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/clouds.png" alt="image"></figure>
     </section>
     <!-- /section -->
     <section class="wrapper bg-[rgba(255,255,255)] opacity-100">
@@ -635,7 +635,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem] items-center">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full px-[7.5px] !mt-[50px]">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/3d8.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/3d8.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !ml-auto px-[7.5px] !mt-[50px]">
@@ -698,7 +698,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !mx-auto xl:!order-2 lg:!order-2 px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/3d5.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/3d5.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !mr-auto px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0">
@@ -736,7 +736,7 @@
             <!-- /.row -->
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center">
               <div class="lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto hidden xl:!flex lg:!flex xl:!px-[35px] lg:!px-[20px]">
-                <div class="img-mask mask-3"><img src="assets/img/photos/about28.jpg" alt="image"></div>
+                <div class="img-mask mask-3"><img src="../assets/img/photos/about28.jpg" alt="image"></div>
               </div>
               <!--/column -->
               <div class="lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mr-auto xl:!px-[35px] lg:!px-[20px]">
@@ -869,7 +869,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] xl:!mt-0 lg:!mt-0 items-center">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/3d3.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/3d3.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full !ml-auto">
@@ -910,7 +910,7 @@
         <!-- /.row -->
       </div>
       <!-- /.container -->
-      <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/clouds.png" alt="image"></figure>
+      <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/clouds.png" alt="image"></figure>
     </section>
     <!-- /section -->
   </div>
@@ -920,7 +920,7 @@
       <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-30px]">
         <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
             <p class="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</p>
           </div>
           <!-- /.widget -->
@@ -981,8 +981,8 @@
       <path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo27.html b/public/html/demo27.html
index 75ac928..a782b4f 100644
--- a/public/html/demo27.html
+++ b/public/html/demo27.html
@@ -11,11 +11,11 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/navy.css">
+  <link rel="stylesheet" href="../assets/css/colors/navy.css">
   <style>
 @media (max-width: 991.98px){
       .navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
@@ -32,7 +32,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -49,205 +49,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -361,87 +361,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -783,7 +783,7 @@
             <div class="swiper-wrapper">
               <div class="swiper-slide">
                 <article>
-                  <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                  <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                     <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                     </figcaption>
@@ -806,7 +806,7 @@
               <!--/.swiper-slide -->
               <div class="swiper-slide">
                 <article>
-                  <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                  <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                     <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                     </figcaption>
@@ -829,7 +829,7 @@
               <!--/.swiper-slide -->
               <div class="swiper-slide">
                 <article>
-                  <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                  <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                     <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                     </figcaption>
@@ -852,7 +852,7 @@
               <!--/.swiper-slide -->
               <div class="swiper-slide">
                 <article>
-                  <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                  <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b7.jpg" alt="image"></a>
                     <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                     </figcaption>
@@ -933,15 +933,15 @@
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[80px]">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g14.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g14.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !self-end !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g15.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g15.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="assets/img/photos/g16.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="../assets/img/photos/g16.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -1013,7 +1013,7 @@
         </div>
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] !relative !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
-          <figure class="!rounded-[.4rem] absolute hidden lg:block xl:block !px-[15px]" style="top: 50%; right:0; width: 45%; height: auto; transform: translateY(-50%); z-index:2"><img class="!rounded-[.4rem]" src="assets/img/photos/tei1.jpg" alt="image"></figure>
+          <figure class="!rounded-[.4rem] absolute hidden lg:block xl:block !px-[15px]" style="top: 50%; right:0; width: 45%; height: auto; transform: translateY(-50%); z-index:2"><img class="!rounded-[.4rem]" src="../assets/img/photos/tei1.jpg" alt="image"></figure>
           <div class="xl:w-9/12 lg:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center">
             <div class="card  !bg-[rgba(246,247,249,1)]">
               <div class="card-body xl:!p-10 lg:!p-10 md:!p-10 xxl:!py-24 p-[40px]">
@@ -1216,7 +1216,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block">All rights reserved.</p>
             <nav class="nav social social-muted">
               <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
@@ -1294,8 +1294,8 @@
       <path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo28.html b/public/html/demo28.html
index b0e00ec..bd0e314 100644
--- a/public/html/demo28.html
+++ b/public/html/demo28.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/purple.css">
-  <link rel="preload" href="assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/purple.css">
+  <link rel="preload" href="../assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
   <style>
 @media (max-width: 991.98px){
       .navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
@@ -33,7 +33,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -50,205 +50,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -362,87 +362,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -568,7 +568,7 @@
       <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-14 md:pb-32 xl:pb-40 lg:pb-40">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-            <div class="img-mask mask-2"><img src="assets/img/photos/about28.jpg" alt="image"></div>
+            <div class="img-mask mask-2"><img src="../assets/img/photos/about28.jpg" alt="image"></div>
           </div>
           <!-- /column -->
         </div>
@@ -600,7 +600,7 @@
           <div class="flex flex-wrap mx-[-20px] xl:mx-[-25px] lg:mx-[-25px] !mt-[-2rem] xl:!mt-[-2.5rem] lg:!mt-[-2.5rem] isotope">
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full workshop px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
               <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                <figure class="card-img-top itooltip itooltip-aqua" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project3.html'> <img src="assets/img/photos/pd6.jpg" alt="image"></a></figure>
+                <figure class="card-img-top itooltip itooltip-aqua" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project3.html'> <img src="../assets/img/photos/pd6.jpg" alt="image"></a></figure>
                 <div class="card-body p-7">
                   <div class="post-header">
                     <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !mb-2 !text-[#54a8c7]">Workshop</div>
@@ -615,7 +615,7 @@
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full product px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
               <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                <figure class="card-img-top itooltip itooltip-purple" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project2.html'> <img src="assets/img/photos/pd4.jpg" alt="image"></a></figure>
+                <figure class="card-img-top itooltip itooltip-purple" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project2.html'> <img src="../assets/img/photos/pd4.jpg" alt="image"></a></figure>
                 <div class="card-body p-7">
                   <div class="post-header">
                     <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1] !mb-2 !text-[#747ed1]">Product</div>
@@ -630,7 +630,7 @@
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full product px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
               <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                <figure class="card-img-top itooltip itooltip-yellow" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project.html'> <img src="assets/img/photos/pd1.jpg" alt="image"></a></figure>
+                <figure class="card-img-top itooltip itooltip-yellow" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project.html'> <img src="../assets/img/photos/pd1.jpg" alt="image"></a></figure>
                 <div class="card-body p-7">
                   <div class="post-header">
                     <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#fab758] !mb-2 !text-[#fab758]">Coffee</div>
@@ -645,7 +645,7 @@
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full workshop px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
               <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                <figure class="card-img-top itooltip itooltip-red" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project2.html'> <img src="assets/img/photos/pd2.jpg" alt="image"></a></figure>
+                <figure class="card-img-top itooltip itooltip-red" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project2.html'> <img src="../assets/img/photos/pd2.jpg" alt="image"></a></figure>
                 <div class="card-body p-7">
                   <div class="post-header">
                     <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e2626b] !mb-2 !text-[#e2626b]">Stationary</div>
@@ -660,7 +660,7 @@
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full still-life px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
               <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                <figure class="card-img-top itooltip itooltip-orange" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project3.html'> <img src="assets/img/photos/pd3.jpg" alt="image"></a></figure>
+                <figure class="card-img-top itooltip itooltip-orange" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project3.html'> <img src="../assets/img/photos/pd3.jpg" alt="image"></a></figure>
                 <div class="card-body p-7">
                   <div class="post-header">
                     <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#f78b77] !mb-2 !text-[#f78b77]">Branding</div>
@@ -675,7 +675,7 @@
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full product px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
               <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                <figure class="card-img-top itooltip itooltip-leaf" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project.html'> <img src="assets/img/photos/pd5.jpg" alt="image"></a></figure>
+                <figure class="card-img-top itooltip itooltip-leaf" title='<h5 class="!mb-0">Click to see the project</h5>'><a href='single-project.html'> <img src="../assets/img/photos/pd5.jpg" alt="image"></a></figure>
                 <div class="card-body p-7">
                   <div class="post-header">
                     <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#7cb798] !mb-2 !text-[#7cb798]">Print</div>
@@ -904,7 +904,7 @@
         <!-- /.grid -->
         <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-30px] items-center">
           <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[30px]">
-            <div class="img-mask mask-2 xxl:!px-8"><img src="assets/img/photos/about28.jpg" alt="image"></div>
+            <div class="img-mask mask-2 xxl:!px-8"><img src="../assets/img/photos/about28.jpg" alt="image"></div>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[30px]">
@@ -1102,8 +1102,8 @@
       <path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo29.html b/public/html/demo29.html
index 9a4acaa..52c67b8 100644
--- a/public/html/demo29.html
+++ b/public/html/demo29.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/grape.css">
-  <link rel="preload" href="assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/grape.css">
+  <link rel="preload" href="../assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .active>.page-link, .page-link.active,
     .plyr__control--overlaid:focus, .plyr__control--overlaid:hover{
@@ -39,7 +39,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -56,205 +56,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -368,87 +368,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -616,18 +616,18 @@
       <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-9">
         <div class="flex flex-wrap mx-0 !mt-[-50px] items-center text-center lg:text-left xl:text-left">
           <div class="xl:w-6/12 lg:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]" data-cues="slideInDown" data-group="page-title" data-delay="700">
-            <img src="assets/img/svg/doodle1.svg" class="h-9 !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="top: -9%; left: -6%" alt="image">
-            <img src="assets/img/svg/doodle2.svg" class="!h-[5rem] !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="bottom: 9%; right: -22%" alt="image">
+            <img src="../assets/img/svg/doodle1.svg" class="h-9 !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="top: -9%; left: -6%" alt="image">
+            <img src="../assets/img/svg/doodle2.svg" class="!h-[5rem] !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="bottom: 9%; right: -22%" alt="image">
             <h1 class="xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] font-semibold !leading-[1.15] !mb-4">Manage all your bills, accounts and budgets in <span class="text-gradient gradient-7">one place.</span></h1>
             <p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">Trunçgil is available to download from both App Store and Google Play Store.</p>
             <div class="flex justify-center lg:!justify-start xl:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="1800">
-              <span class="inline-flex"><a href="#" class="!mr-2 inline-block"><img src="assets/img/photos/button-appstore.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"></a></span>
-              <span class="inline-flex"><a class="inline-block" href="#"><img src="assets/img/photos/button-google-play.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"></a></span>
+              <span class="inline-flex"><a href="#" class="!mr-2 inline-block"><img src="../assets/img/photos/button-appstore.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"></a></span>
+              <span class="inline-flex"><a class="inline-block" href="#"><img src="../assets/img/photos/button-google-play.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"></a></span>
             </div>
           </div>
           <!-- /column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mb-[-10rem] xxl:!mb-[-15rem] !mt-[50px]" data-cues="slideInDown" data-delay="600">
-            <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/devices3.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/devices3.png" alt="image"></figure>
           </div>
           <!-- /column -->
         </div>
@@ -650,8 +650,8 @@
       <div class="container pt-32 xl:pt-40 lg:pt-40 md:pt-40 pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
         <div class="flex flex-wrap mx-[-15px] !text-center">
           <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
-            <img src="assets/img/svg/doodle3.svg" class="!h-[3rem] absolute hidden xl:block lg:block" style="top: -45%; left: 23%" alt="image">
-            <img src="assets/img/svg/doodle4.svg" class="h-8 absolute hidden xl:block lg:block" style="top: 6%; right: 2%" alt="image">
+            <img src="../assets/img/svg/doodle3.svg" class="!h-[3rem] absolute hidden xl:block lg:block" style="top: -45%; left: 23%" alt="image">
+            <img src="../assets/img/svg/doodle4.svg" class="h-8 absolute hidden xl:block lg:block" style="top: 6%; right: 2%" alt="image">
             <h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3">App Features</h2>
             <h3 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] !mb-12 lg:!px-5 xl:!px-0 xxl:!px-6">Trunçgil makes your spending <span class="text-gradient gradient-7">stress-free</span> for you to have the perfect control.</h3>
           </div>
@@ -709,8 +709,8 @@
         <!-- /.row -->
         <div class="flex flex-wrap mx-[-15px] !text-center">
           <div class="md:w-10/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
-            <img src="assets/img/svg/doodle5.svg" class="!w-[5rem] absolute hidden xl:block lg:block" data-delay="1800" style="bottom: -60%; right: 10%" alt="image">
-            <img src="assets/img/svg/doodle6.svg" class="!h-[5rem] !absolute hidden xl:block lg:block" data-delay="1800" style="top: -40%; left: -5%" alt="image">
+            <img src="../assets/img/svg/doodle5.svg" class="!w-[5rem] absolute hidden xl:block lg:block" data-delay="1800" style="bottom: -60%; right: 10%" alt="image">
+            <img src="../assets/img/svg/doodle6.svg" class="!h-[5rem] !absolute hidden xl:block lg:block" data-delay="1800" style="top: -40%; left: -5%" alt="image">
             <h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">How It Works</h2>
             <h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-8 xl:!px-6">Download the app, create your profile and <span class="text-gradient gradient-7">voilà</span>, you're all set!</h3>
           </div>
@@ -721,7 +721,7 @@
           <div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
             <div class="flex flex-wrap mx-[-15px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !text-center items-center">
               <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[-2.5rem] lg:!mb-0 xl:!mb-0 !mt-[50px] xl:!mt-0 lg:!mt-0">
-                <figure class="mx-auto"><img src="assets/img/photos/devices4.png" alt="image"></figure>
+                <figure class="mx-auto"><img src="../assets/img/photos/devices4.png" alt="image"></figure>
               </div>
               <!-- /column -->
               <div class="w-full xl:!hidden lg:!hidden !px-[15px] !mt-[50px] xl:!mt-0 lg:!mt-0"></div>
@@ -765,7 +765,7 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-    <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="assets/img/photos/bg23.png">
+    <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="../assets/img/photos/bg23.png">
       <div class="container py-[4.5rem] md:pt-24 lg:pt-0 xl:pt-0 xl:pb-[7rem] lg:pb-[7rem] md:pb-[7rem] !relative" style="z-index: 2;">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -773,8 +773,8 @@
               <div class="player relative z-[2] rounded-[0.4rem]" data-plyr-provider="vimeo" data-plyr-embed-id="165101721"></div>
             </div>
             <div class="!relative">
-              <img src="assets/img/svg/doodle7.svg" class="h-7 absolute hidden xl:block lg:block" data-delay="1800" style="top: -90%; right: -3%" alt="image">
-              <img src="assets/img/svg/doodle8.svg" class="!h-[4.5rem] absolute hidden xl:block lg:block" data-delay="1800" style="top: -20%; left: -12%" alt="image">
+              <img src="../assets/img/svg/doodle7.svg" class="h-7 absolute hidden xl:block lg:block" data-delay="1800" style="top: -90%; right: -3%" alt="image">
+              <img src="../assets/img/svg/doodle8.svg" class="!h-[4.5rem] absolute hidden xl:block lg:block" data-delay="1800" style="top: -20%; left: -12%" alt="image">
               <h2 class="!text-[0.8rem] uppercase !text-[#aab0bc] !mb-3 !text-center !leading-[1.35]">FAQ</h2>
               <h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-12 lg:!px-8 xl:!px-12 !text-center">If you don't see an <span class="text-gradient gradient-7">answer</span> to your question, you can send us an email from our contact form.</h3>
             </div>
@@ -889,8 +889,8 @@
       <div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
         <div class="flex flex-wrap mx-[-15px] !text-center">
           <div class="md:w-11/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
-            <img src="assets/img/svg/doodle3.svg" class="!h-[3rem] absolute hidden xl:block lg:block" style="top: -20%; right: -12%" alt="image">
-            <img src="assets/img/svg/doodle9.svg" class="!h-[7rem] absolute hidden xl:block lg:block" style="bottom: 5%; left: -17%" alt="image">
+            <img src="../assets/img/svg/doodle3.svg" class="!h-[3rem] absolute hidden xl:block lg:block" style="top: -20%; right: -12%" alt="image">
+            <img src="../assets/img/svg/doodle9.svg" class="!h-[7rem] absolute hidden xl:block lg:block" style="bottom: 5%; left: -17%" alt="image">
             <h2 class="!text-[0.8rem] uppercase !text-[#aab0bc] !mb-3 !text-center !leading-[1.35]">Why Choose Trunçgil?</h2>
             <h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-14 !text-center">Here are a few <span class="text-gradient gradient-7">reasons why</span> our customers choose the Trunçgil app.</h3>
           </div>
@@ -899,7 +899,7 @@
         <!-- /.row -->
         <div class="flex-wrap mx-[-15px] flex items-start !mb-36">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!sticky lg:!sticky" style="top: 8rem;">
-            <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/devices5.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/devices5.png" alt="image"></figure>
           </div>
           <!-- /column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto">
@@ -963,9 +963,9 @@
         <!-- /.row -->
         <div class="flex flex-wrap mx-[-15px]">
           <div class="md:w-11/12 lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center !relative">
-            <img src="assets/img/svg/doodle1.svg" class="h-9 !absolute hidden xl:block lg:block" style="top: 2%; left: 9%" alt="image">
-            <img src="assets/img/svg/doodle10.svg" class="h-7 absolute hidden xl:block lg:block" style="top: -45%; left: -17%" alt="image">
-            <img src="assets/img/svg/doodle11.svg" class="!h-[4rem] absolute hidden xl:block lg:block" style="top: -40%; right: -15%" alt="image">
+            <img src="../assets/img/svg/doodle1.svg" class="h-9 !absolute hidden xl:block lg:block" style="top: 2%; left: 9%" alt="image">
+            <img src="../assets/img/svg/doodle10.svg" class="h-7 absolute hidden xl:block lg:block" style="top: -45%; left: -17%" alt="image">
+            <img src="../assets/img/svg/doodle11.svg" class="!h-[4rem] absolute hidden xl:block lg:block" style="top: -40%; right: -15%" alt="image">
             <h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">Happy Customers</h2>
             <h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-12 xl:!px-10 xxl:!px-16">Don't take our word for it. See what <span class="text-gradient gradient-7">customers</span> are saying about us.</h3>
           </div>
@@ -1090,7 +1090,7 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-        <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="assets/img/photos/bg23.png">
+        <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="../assets/img/photos/bg23.png">
           <div class="overflow-hidden" style="z-index:1;">
             <div class="divider divider-alt !text-[#fefefe] mx-[-0.5rem]">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
@@ -1104,18 +1104,18 @@
           <div class="container pt-10 xl:pt-10 lg:pt-10 md:pt-16 pb-8 xl:pb-10 lg:pb-10 md:pb-10 text-center xl:text-left lg:text-left">
             <div class="flex flex-wrap mx-0 !mt-[-50px]">
               <div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]">
-                <img src="assets/img/svg/doodle2.svg" class="!h-[5rem] !absolute hidden xl:block lg:block" style="bottom: 36%; right: -25%" alt="image">
-                <img src="assets/img/svg/doodle6.svg" class="!h-[4.5rem] !absolute hidden xl:block lg:block" style="top: -20%; left: -25%" alt="image">
+                <img src="../assets/img/svg/doodle2.svg" class="!h-[5rem] !absolute hidden xl:block lg:block" style="bottom: 36%; right: -25%" alt="image">
+                <img src="../assets/img/svg/doodle6.svg" class="!h-[4.5rem] !absolute hidden xl:block lg:block" style="top: -20%; left: -25%" alt="image">
                 <h2 class="!text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] xl:!text-[2rem] !mb-4">Manage all your bills, accounts & budgets in <span class="text-gradient gradient-7">one place.</span></h2>
                 <p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">Trunçgil is available to download from both App Store and Google Play Store.</p>
                 <div class="flex justify-center xl:!justify-start lg:!justify-start">
-                  <span class="inline-flex"><a href="#" class="!mr-2 inline-block"><img src="assets/img/photos/button-appstore.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"></a></span>
-                  <span class="inline-flex"><a href="#" class="inline-block"><img src="assets/img/photos/button-google-play.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"></a></span>
+                  <span class="inline-flex"><a href="#" class="!mr-2 inline-block"><img src="../assets/img/photos/button-appstore.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"></a></span>
+                  <span class="inline-flex"><a href="#" class="inline-block"><img src="../assets/img/photos/button-google-play.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"></a></span>
                 </div>
               </div>
               <!-- /column -->
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mt-lg-n15 xl:!mt-[-10rem] lg:!mt-[-5rem] !mt-[50px]">
-                <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/devices6.png" alt="image"></figure>
+                <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/devices6.png" alt="image"></figure>
               </div>
               <!-- /column -->
             </div>
@@ -1131,7 +1131,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block">All rights reserved.</p>
             <nav class="nav social">
               <a class="!text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-[#5daed5] text-[1rem]"></i></a>
@@ -1209,8 +1209,8 @@
       <path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo3.html b/public/html/demo3.html
index 1901343..b89d9ed 100644
--- a/public/html/demo3.html
+++ b/public/html/demo3.html
@@ -17,13 +17,13 @@
    
    
    
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-  <link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+  <link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/aqua.css">
-  <link rel="preload" href="assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
-  <link rel="stylesheet" href="assets/css/icon.css">
+  <link rel="stylesheet" href="../assets/css/colors/aqua.css">
+  <link rel="preload" href="../assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/icon.css">
   <style>
     .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
       background: #54a8c7 !important;
@@ -50,9 +50,9 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img class="logo-dark" src="assets/img/truncgil-yatay.svg"
+              <img class="logo-dark" src="../assets/img/truncgil-yatay.svg"
                 alt="image">
-              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg"
+              <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg"
                 alt="image">
             </a>
           </div>
@@ -75,7 +75,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi1.jpg" alt="image">
+                                src="../assets/img/demos/mi1.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
@@ -83,7 +83,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi2.jpg" alt="image">
+                                src="../assets/img/demos/mi2.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
@@ -91,7 +91,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi3.jpg" alt="image">
+                                src="../assets/img/demos/mi3.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
@@ -99,7 +99,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi4.jpg" alt="image">
+                                src="../assets/img/demos/mi4.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
@@ -107,7 +107,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi5.jpg" alt="image">
+                                src="../assets/img/demos/mi5.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
@@ -115,7 +115,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi6.jpg" alt="image">
+                                src="../assets/img/demos/mi6.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
@@ -123,7 +123,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi7.jpg" alt="image">
+                                src="../assets/img/demos/mi7.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
@@ -131,7 +131,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi8.jpg" alt="image">
+                                src="../assets/img/demos/mi8.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
@@ -139,7 +139,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi9.jpg" alt="image">
+                                src="../assets/img/demos/mi9.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
@@ -147,7 +147,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi10.jpg"
+                                src="../assets/img/demos/mi10.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
@@ -155,7 +155,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi11.jpg"
+                                src="../assets/img/demos/mi11.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
@@ -163,7 +163,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi12.jpg"
+                                src="../assets/img/demos/mi12.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
@@ -171,7 +171,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi13.jpg"
+                                src="../assets/img/demos/mi13.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
@@ -179,7 +179,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi14.jpg"
+                                src="../assets/img/demos/mi14.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
@@ -187,7 +187,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi15.jpg"
+                                src="../assets/img/demos/mi15.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
@@ -195,7 +195,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi16.jpg"
+                                src="../assets/img/demos/mi16.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
@@ -203,7 +203,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi17.jpg"
+                                src="../assets/img/demos/mi17.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
@@ -211,7 +211,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi18.jpg"
+                                src="../assets/img/demos/mi18.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
@@ -219,7 +219,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi19.jpg"
+                                src="../assets/img/demos/mi19.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
@@ -227,7 +227,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi20.jpg"
+                                src="../assets/img/demos/mi20.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
@@ -235,7 +235,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi21.jpg"
+                                src="../assets/img/demos/mi21.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
@@ -243,7 +243,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi22.jpg"
+                                src="../assets/img/demos/mi22.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
@@ -251,7 +251,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi23.jpg"
+                                src="../assets/img/demos/mi23.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
@@ -259,7 +259,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi24.jpg"
+                                src="../assets/img/demos/mi24.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
@@ -267,7 +267,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi25.jpg"
+                                src="../assets/img/demos/mi25.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
@@ -275,7 +275,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi26.jpg"
+                                src="../assets/img/demos/mi26.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
@@ -283,7 +283,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi27.jpg"
+                                src="../assets/img/demos/mi27.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
@@ -291,7 +291,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi28.jpg"
+                                src="../assets/img/demos/mi28.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
@@ -299,7 +299,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi29.jpg"
+                                src="../assets/img/demos/mi29.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
@@ -307,7 +307,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi30.jpg"
+                                src="../assets/img/demos/mi30.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
@@ -315,7 +315,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi31.jpg"
+                                src="../assets/img/demos/mi31.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
@@ -323,7 +323,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi32.jpg"
+                                src="../assets/img/demos/mi32.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
@@ -331,7 +331,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi33.jpg"
+                                src="../assets/img/demos/mi33.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
@@ -339,7 +339,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi34.jpg"
+                                src="../assets/img/demos/mi34.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
@@ -500,103 +500,103 @@
                         class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -767,12 +767,12 @@
             class="lg:w-5/12 xl:w-5/12 w-full flex-[0_0_auto] max-w-full px-0 !mt-[50px] lg:!ml-[8.33333333%] xl:!ml-[8.33333333%] !mb-[-8rem] relative z-[3]"
             data-cues="slideInDown">
             <div class="!relative">
-              <a href="assets/media/movie.mp4"
+              <a href="../assets/media/movie.mp4"
                 class="btn btn-circle btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] active:!text-[#343f52] active:bg-[#54a8c7] active:border-[#54a8c7] disabled:!text-[#343f52] disabled:bg-[#54a8c7] disabled:border-[#54a8c7] btn-play ripple !mx-auto !mb-6 !absolute !text-[calc(1.355rem_+_1.26vw)] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#54a8c7] after:!bg-[#54a8c7] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:[animation-delay:.5s]"
                 style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i
                   class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
               <figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img
-                  class="!rounded-[.4rem]" src="assets/img/photos/about13.jpg"
+                  class="!rounded-[.4rem]" src="../assets/img/photos/about13.jpg"
  alt="image"></figure>
             </div>
             <!-- /div -->
@@ -851,7 +851,7 @@
             <div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]"
               data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
             <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]"
-                src="assets/img/photos/about7.jpg" alt="image"></figure>
+                src="../assets/img/photos/about7.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div
@@ -903,7 +903,7 @@
             <div class="shape rounded !bg-[#edf2fc] rellax xl:block lg:block md:block absolute z-[1]"
               data-rellax-speed="0" style="bottom: -1.8rem; left: -1.5rem; width: 85%; height: 90%; "></div>
             <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[.4rem]"
-                src="assets/img/photos/about9.jpg" alt="image"></figure>
+                src="../assets/img/photos/about9.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div
@@ -987,7 +987,7 @@
     <!-- /section -->
     <section
       class="wrapper image-wrapper bg-image bg-overlay !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]"
-      data-image-src="assets/img/photos/bg1.jpg">
+      data-image-src="../assets/img/photos/bg1.jpg">
       <div class="container py-[8rem]">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
@@ -1029,7 +1029,7 @@
                 <article>
                   <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img
                         class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105"
-                        src="assets/img/photos/b4.jpg" alt="image"></a>
+                        src="../assets/img/photos/b4.jpg" alt="image"></a>
                     <figcaption
                       class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read
@@ -1063,7 +1063,7 @@
                 <article>
                   <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img
                         class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105"
-                        src="assets/img/photos/b5.jpg" alt="image"></a>
+                        src="../assets/img/photos/b5.jpg" alt="image"></a>
                     <figcaption
                       class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read
@@ -1097,7 +1097,7 @@
                 <article>
                   <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img
                         class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105"
-                        src="assets/img/photos/b6.jpg" alt="image"></a>
+                        src="../assets/img/photos/b6.jpg" alt="image"></a>
                     <figcaption
                       class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read
@@ -1131,7 +1131,7 @@
                 <article>
                   <figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img
                         class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105"
-                        src="assets/img/photos/b7.jpg" alt="image"></a>
+                        src="../assets/img/photos/b7.jpg" alt="image"></a>
                     <figcaption
                       class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read
@@ -1231,7 +1231,7 @@
             <div class="flex flex-wrap mx-0">
               <div
                 class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start bg-cover bg-[center_center] bg-no-repeat bg-scroll relative z-0 xl:rounded-tl-[0.4rem] xl:rounded-tr-none xl:rounded-br-none xl:rounded-bl-[0.4rem] lg:rounded-tl-[0.4rem] lg:rounded-tr-none lg:rounded-br-none lg:rounded-bl-[0.4rem] md:min-h-[25rem] max-md:min-h-[25rem]"
-                data-image-src="assets/img/photos/tm1.jpg">
+                data-image-src="../assets/img/photos/tm1.jpg">
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
@@ -1425,7 +1425,7 @@
             <div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]"
               data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
             <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[.4rem]"
-                src="assets/img/photos/about14.jpg" alt="image">
+                src="../assets/img/photos/about14.jpg" alt="image">
             </figure>
           </div>
           <!--/column -->
@@ -1483,7 +1483,7 @@
         <div
           class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.
             </p>
             <nav class="nav social social-white">
@@ -1585,8 +1585,8 @@
         d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo30.html b/public/html/demo30.html
index 4712cad..72e94c2 100644
--- a/public/html/demo30.html
+++ b/public/html/demo30.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/grape.css">
-  <link rel="preload" href="assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/grape.css">
+  <link rel="preload" href="../assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
   <style>
 .swiper-container.nav-color .swiper-button, .swiper-container.nav-color .swiper-slide figure .item-link {
     background: #e31e24e6 !important;
@@ -46,7 +46,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -63,205 +63,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -375,87 +375,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -579,7 +579,7 @@
     <!-- /header -->
     <section class="wrapper overflow-hidden">
       <div class="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] !text-center !relative">
-        <div class="absolute" style="top: -15%; left: 50%; transform: translateX(-50%);" data-cue="fadeIn"><img class="!rounded-[0.8rem]" src="assets/img/photos/blurry.png" alt="image"></div>
+        <div class="absolute" style="top: -15%; left: 50%; transform: translateX(-50%);" data-cue="fadeIn"><img class="!rounded-[0.8rem]" src="../assets/img/photos/blurry.png" alt="image"></div>
         <div class="flex flex-wrap mx-[-15px] !relative">
           <div class="lg:w-8/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
             <div class="absolute shape grape w-5 hidden xl:block lg:block" style="top: -5%; left: -15%;" data-cue="fadeIn" data-delay="1500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219.5 219.5" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/pie.svg" class="svg-inject icon-svg !w-full !h-full"><path class="svg-fill" d="M219.5 219.5H0c0-58.19 23.14-114.06 64.29-155.21A219.561 219.561 0 01219.5 0v219.5z"></path></svg></div>
@@ -606,27 +606,27 @@
           <div class="swiper overflow-visible">
             <div class="swiper-wrapper">
               <div class="swiper-slide group">
-                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="assets/img/photos/bp1.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
+                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="../assets/img/photos/bp1.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide group">
-                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="assets/img/photos/bp2.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
+                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="../assets/img/photos/bp2.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide group">
-                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="assets/img/photos/bp3.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
+                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="../assets/img/photos/bp3.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide group">
-                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="assets/img/photos/bp4.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
+                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="../assets/img/photos/bp4.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide group">
-                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="assets/img/photos/bp5.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
+                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="../assets/img/photos/bp5.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide group">
-                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="assets/img/photos/bp6.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
+                <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[0.8rem]" src="../assets/img/photos/bp6.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(96,93,186,.9)] group-hover:opacity-100 group-hover:right-4' href='single-project.html'><i class="uil uil-arrow-up-right before:content-['\e950']"></i></a></figure>
               </div>
               <!--/.swiper-slide -->
             </div>
@@ -681,7 +681,7 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-    <section class="wrapper bg-repeat bg-fixed bg-image section-frame xl:mx-[1.5rem] xl:rounded-[1rem] lg:mx-[1.5rem] lg:rounded-[1rem] md:mx-[1.5rem] md:rounded-[1rem]" data-image-src="assets/img/pattern.png">
+    <section class="wrapper bg-repeat bg-fixed bg-image section-frame xl:mx-[1.5rem] xl:rounded-[1rem] lg:mx-[1.5rem] lg:rounded-[1rem] md:mx-[1.5rem] md:rounded-[1rem]" data-image-src="../assets/img/pattern.png">
       <div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-24 xl:pb-32 lg:pb-32 md:pb-32">
         <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center !mb-[8rem]">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 xl:!ml-auto lg:!order-2 lg:!ml-auto xl:px-0 lg:px-0 !mt-[50px]">
@@ -744,7 +744,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center !text-[#cacaca]">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[50px]">
-            <figure class="m-0 p-0"><img class="img-auto" src="assets/img/illustrations/ui4.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="img-auto" src="../assets/img/illustrations/ui4.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-auto lg:!ml-auto xl:px-0 lg:px-0 !mt-[50px]">
@@ -786,8 +786,8 @@
         <!-- /.row -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !relative xl:px-0 lg:px-0 !mt-[50px]">
-            <div class="absolute" style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:-1"><img class="w-full" src="assets/img/photos/blurry.png" alt="image"></div>
-            <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/mi1.png" alt="image"></figure>
+            <div class="absolute" style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:-1"><img class="w-full" src="../assets/img/photos/blurry.png" alt="image"></div>
+            <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/mi1.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto xl:px-0 lg:px-0 !mt-[50px]">
@@ -826,8 +826,8 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !relative xl:!order-2 lg:!order-2 xl:px-0 lg:px-0 !mt-[50px]">
-            <div class="absolute" style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index: -1"><img class="w-full" src="assets/img/photos/blurry.png" alt="image"></div>
-            <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/mi2.png" alt="image"></figure>
+            <div class="absolute" style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index: -1"><img class="w-full" src="../assets/img/photos/blurry.png" alt="image"></div>
+            <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/mi2.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mr-auto xl:px-0 lg:px-0 !mt-[50px]">
@@ -881,25 +881,25 @@
         <div class="swiper overflow-visible pointer-events-none">
           <div class="swiper-wrapper ticker">
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma8.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma8.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma9.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma9.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma10.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma10.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma11.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma11.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma12.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma12.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma13.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma13.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma14.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma14.jpg" alt="" /></figure>
             </div>
           </div>
           <!--/.swiper-wrapper -->
@@ -911,25 +911,25 @@
         <div class="swiper overflow-visible pointer-events-none" dir="rtl">
           <div class="swiper-wrapper ticker">
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma1.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma1.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma2.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma2.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma3.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma3.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma4.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma4.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma5.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma5.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma6.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma6.jpg" alt="" /></figure>
             </div>
             <div class="swiper-slide">
-              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="assets/img/photos/ma7.jpg" alt="" /></figure>
+              <figure class="rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]"><img class="!rounded-[.8rem]" src="../assets/img/photos/ma7.jpg" alt="" /></figure>
             </div>
           </div>
           <!--/.swiper-wrapper -->
@@ -942,12 +942,12 @@
       </div>
     </section>
     <!-- /section -->
-    <section class="wrapper bg-repeat bg-fixed bg-image section-frame xl:mx-6 xl:rounded-[1rem] lg:mx-6 lg:rounded-[1rem] md:mx-6 md:rounded-[1rem]" data-image-src="assets/img/pattern.png">
+    <section class="wrapper bg-repeat bg-fixed bg-image section-frame xl:mx-6 xl:rounded-[1rem] lg:mx-6 lg:rounded-[1rem] md:mx-6 md:rounded-[1rem]" data-image-src="../assets/img/pattern.png">
       <div class="container py-[4.5rem] md:pt-24 xl:pt-0 lg:pt-0 xl:pb-14 lg:pb-14 md:pb-14">
         <div class="flex flex-wrap mx-[-15px] !text-center !mb-16">
           <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
             <div class="lg:!mt-[-17.5rem]  xl:!mt-[-12.5rem]">
-              <figure class="rounded-[0.8rem]"><img class="!rounded-[0.8rem]" src="assets/img/photos/about18.jpg" alt="image"></figure>
+              <figure class="rounded-[0.8rem]"><img class="!rounded-[0.8rem]" src="../assets/img/photos/about18.jpg" alt="image"></figure>
             </div>
           </div>
           <!--/column -->
@@ -973,7 +973,7 @@
       <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-40 xl:pb-60 lg:pb-60 md:pb-60">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !relative xl:!px-[35px] lg:!px-[20px] !mt-[50px]">
-            <div class="absolute hidden xl:block lg:block md:block" style="top: 50%; left: 50%; width: 130%; height: auto; transform: translate(-50%,-50%); z-index:-1"><img class="w-full" src="assets/img/photos/blurry.png" alt="image"></div>
+            <div class="absolute hidden xl:block lg:block md:block" style="top: 50%; left: 50%; width: 130%; height: auto; transform: translate(-50%,-50%); z-index:-1"><img class="w-full" src="../assets/img/photos/blurry.png" alt="image"></div>
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="md:w-6/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
                 <div class="card !shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[0.8rem]">
@@ -1080,7 +1080,7 @@
             </div>
             <div class="flex flex-wrap mx-[-15px] !mt-[25px] !relative">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                <div class="absolute pointer-events-none hidden xl:block lg:block md:block" style="top: 55%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:-1"><img class="w-full" src="assets/img/photos/blurry.png" alt="image"></div>
+                <div class="absolute pointer-events-none hidden xl:block lg:block md:block" style="top: 55%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:-1"><img class="w-full" src="../assets/img/photos/blurry.png" alt="image"></div>
                 <div class="pricing card !shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[0.8rem]">
                   <div class="card-body pb-14">
                     <div class="prices !text-[#343f52]">
@@ -1138,9 +1138,9 @@
     <!-- /section -->
   </div>
   <!-- /.content-wrapper -->
-  <footer class="wrapper bg-repeat bg-fixed bg-image section-frame xl:mx-6 xl:rounded-[1rem] lg:mx-6 lg:rounded-[1rem] md:mx-6 md:rounded-[1rem]" data-image-src="assets/img/pattern.png">
+  <footer class="wrapper bg-repeat bg-fixed bg-image section-frame xl:mx-6 xl:rounded-[1rem] lg:mx-6 lg:rounded-[1rem] md:mx-6 md:rounded-[1rem]" data-image-src="../assets/img/pattern.png">
     <div class="container pb-16 xl:pb-20 lg:pb-20 md:pb-20">
-      <div class="card image-wrapper bg-full bg-image bg-overlay xl:mx-5 lg:mx-5 md:mx-5 !rounded-[0.8rem] overflow-hidden [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:rounded-[0.4rem] before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)] -translate-y-2/4" data-image-src="assets/img/photos/bg27.jpg">
+      <div class="card image-wrapper bg-full bg-image bg-overlay xl:mx-5 lg:mx-5 md:mx-5 !rounded-[0.8rem] overflow-hidden [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:rounded-[0.4rem] before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)] -translate-y-2/4" data-image-src="../assets/img/photos/bg27.jpg">
         <div class="card-body p-6 flex-row text-center xl:!justify-between lg:!justify-between md:!justify-between xl:!flex xl:!items-center lg:!flex lg:!items-center xl:!p-12 lg:!p-12 md:!p-12 xl:!text-left lg:!text-left">
           <h3 class="!text-[calc(1.345rem_+_1.14vw)] !font-semibold !leading-[1.2] xl:!text-[2.2rem] !mb-6 xl:!mb-0 lg:!mb-0 lg:!pr-[2.5rem] xl:!pr-[1.25rem] xxl:!pr-[8rem] !text-white">We are trusted by over 5000+ clients. Join them now and grow your business.</h3>
           <a href="#" class="btn btn-lg btn-white !rounded-[0.8rem]  !mb-0 whitespace-nowrap">Join Us</a>
@@ -1216,8 +1216,8 @@
       <path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo31.html b/public/html/demo31.html
index a5279d1..3cb4733 100644
--- a/public/html/demo31.html
+++ b/public/html/demo31.html
@@ -11,11 +11,11 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="preload" href="assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="preload" href="../assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .solid.text-primary .fill-primary, .solid.text-primary .fill-secondary {
     fill: #3f78e0 !important;
@@ -47,7 +47,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -64,205 +64,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -376,87 +376,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -595,7 +595,7 @@
         <!-- /.row -->
         <div class="flex flex-wrap mx-[-15px]">
           <div class="lg:w-10/12 xl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[3rem] !mb-[-12.5rem] relative z-[3]">
-            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="assets/img/illustrations/i28.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="../assets/img/illustrations/i28.png" alt="image"></figure>
           </div>
           <!-- /column -->
         </div>
@@ -617,17 +617,17 @@
         <div class="swiper-container clients !mb-36 relative z-10" data-margin="30" data-dots="false" data-loop="true" data-autoplay="true" data-autoplaytime="1" data-drag="false" data-speed="5000" data-items-xxl="7" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-sm="3" data-items-xs="3">
           <div class="swiper pointer-events-none">
             <div class="swiper-wrapper ticker">
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c1.png" alt="image"></div>
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c2.png" alt="image"></div>
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c3.png" alt="image"></div>
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c4.png" alt="image"></div>
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c5.png" alt="image"></div>
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c6.png" alt="image"></div>
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c7.png" alt="image"></div>
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c8.png" alt="image"></div>
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c9.png" alt="image"></div>
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c10.png" alt="image"></div>
-              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="assets/img/brands/c11.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c1.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c2.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c3.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c4.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c5.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c6.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c7.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c8.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c9.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c10.png" alt="image"></div>
+              <div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../assets/img/brands/c11.png" alt="image"></div>
             </div>
             <!--/.swiper-wrapper -->
           </div>
@@ -644,7 +644,7 @@
         <!-- /.row -->
         <div class="flex flex-wrap mx-[-15px] !mt-[-50px] items-center !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px]">
-            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="assets/img/illustrations/i29.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="../assets/img/illustrations/i29.png" alt="image"></figure>
           </div>
           <!-- /column -->
           <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto !mt-[50px]">
@@ -663,7 +663,7 @@
         <!-- /.row -->
         <div class="flex flex-wrap mx-[-15px] !mt-[-50px] items-center !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 !mt-[50px]">
-            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="assets/img/illustrations/i30.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="../assets/img/illustrations/i30.png" alt="image"></figure>
           </div>
           <!-- /column -->
           <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mr-auto !mt-[50px]">
@@ -682,7 +682,7 @@
         <!-- /.row -->
         <div class="flex flex-wrap mx-[-15px] !mt-[-50px] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px]">
-            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="assets/img/illustrations/i31.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="../assets/img/illustrations/i31.png" alt="image"></figure>
           </div>
           <!-- /column -->
           <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto !mt-[50px]">
@@ -717,7 +717,7 @@
             <!-- /.row -->
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center">
               <div class="lg:w-5/12 xl:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full !ml-auto hidden xl:!flex lg:!flex xl:!px-[35px] lg:!px-[20px]">
-                <div class="img-mask mask-3"><img src="assets/img/photos/about13.jpg" alt="image"></div>
+                <div class="img-mask mask-3"><img src="../assets/img/photos/about13.jpg" alt="image"></div>
               </div>
               <!--/column -->
               <div class="lg:w-6/12 xl:w-6/12 xxl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full !mr-auto xl:!px-[35px] lg:!px-[20px]">
@@ -791,11 +791,11 @@
               <div class="card-body !px-9 py-0 overflow-hidden">
                 <div class="flex flex-wrap mx-[-10px] xl:mx-[-22.5px] lg:mx-[-22.5px] md:mx-[-22.5px]">
                   <div class="w-6/12 flex-[0_0_auto] max-w-full px-[10px] xl:!px-[22.5px] lg:!px-[22.5px] md:!px-[22.5px]">
-                    <figure class="!mt-9"><a href="#"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]" src="assets/img/demos/d18.jpg" alt="image"></a></figure>
+                    <figure class="!mt-9"><a href="#"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]" src="../assets/img/demos/d18.jpg" alt="image"></a></figure>
                   </div>
                   <!-- /column -->
                   <div class="w-6/12 flex-[0_0_auto] max-w-full px-[10px] xl:!px-[22.5px] lg:!px-[22.5px] md:!px-[22.5px]">
-                    <figure><a href="#"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]" src="assets/img/demos/d18-2.jpg" alt="image"></a></figure>
+                    <figure><a href="#"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]" src="../assets/img/demos/d18-2.jpg" alt="image"></a></figure>
                   </div>
                   <!-- /column -->
                 </div>
@@ -821,7 +821,7 @@
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 !mt-[50px]">
             <div class="card !bg-[#edf2fc]">
               <div class="card-body !p-12 overflow-hidden">
-                <figure><a href="#"><img src="assets/img/photos/f2.png" alt="image"></a></figure>
+                <figure><a href="#"><img src="../assets/img/photos/f2.png" alt="image"></a></figure>
               </div>
               <!--/.card-body -->
             </div>
@@ -843,7 +843,7 @@
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px]">
             <div class="card !bg-[#f6f3f9]">
               <div class="card-body !p-12 !pb-0 overflow-hidden">
-                <figure><a href="#"><img src="assets/img/photos/f1.png" alt="image"></a></figure>
+                <figure><a href="#"><img src="../assets/img/photos/f1.png" alt="image"></a></figure>
               </div>
               <!--/.card-body -->
             </div>
@@ -865,7 +865,7 @@
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 !mt-[50px]">
             <div class="card !bg-[#fcf0f1]">
               <div class="card-body !p-12 !pb-0 overflow-hidden">
-                <figure><a href="#"><img src="assets/img/photos/f4.png" alt="image"></a></figure>
+                <figure><a href="#"><img src="../assets/img/photos/f4.png" alt="image"></a></figure>
               </div>
               <!--/.card-body -->
             </div>
@@ -917,7 +917,7 @@
         <!-- /.row -->
         <div class="flex flex-wrap mx-[-15px] !relative" style="z-index: 1">
           <div class="lg:w-10/12 xl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[3rem] xl:!mb-[-15rem] lg:!mb-[-15rem] md:!mb-[-15rem] sm:!mb-[-10rem]">
-            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="assets/img/illustrations/i32.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="../assets/img/illustrations/i32.png" alt="image"></figure>
           </div>
           <!-- /column -->
         </div>
@@ -940,7 +940,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block">All rights reserved.</p>
             <nav class="nav social">
               <a class="!text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-[#5daed5] text-[1rem]"></i></a>
@@ -1018,8 +1018,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo32.html b/public/html/demo32.html
index d5128af..2d62cf1 100644
--- a/public/html/demo32.html
+++ b/public/html/demo32.html
@@ -11,11 +11,11 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="preload" href="assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="preload" href="../assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
   <style>
    .nav-tabs.nav-tabs-bg .nav-link.active, .nav-tabs.nav-tabs-bg .nav-link:hover {
     box-shadow: 0 0.25rem 1.75rem rgba(30,34,40,.07) !important;
@@ -30,8 +30,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+              <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+              <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -48,205 +48,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -360,87 +360,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -628,22 +628,22 @@
     <section class="wrapper !bg-[#ffffff]">
       <div class="container py-20 xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem] !relative">
         <figure class="!rounded-[.4rem] !mt-[-12.5rem] xl:!mt-[-17.5rem] lg:!mt-[-17.5rem]  !mb-24 xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] !relative" data-cues="fadeIn" data-delay="250">
-          <a href="assets/media/movie3.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !absolute z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox=""><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
-          <video class="w-full rounded caption-overlay block " poster="assets/img/photos/movie3.jpg" src="assets/media/movie3.mp4" autoplay loop playsinline muted></video>
+          <a href="../assets/media/movie3.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !absolute z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox=""><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
+          <video class="w-full rounded caption-overlay block " poster="../assets/img/photos/movie3.jpg" src="../assets/media/movie3.mp4" autoplay loop playsinline muted></video>
         </figure>
         <div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] md:mx-[-20px] xl:mx-[-35px] items-center !mb-10 xl:!mb-14 lg:!mb-14 md:!mb-14">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[80px]">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g12.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g12.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !self-end !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g13.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g13.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="assets/img/photos/g11.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="../assets/img/photos/g11.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -729,7 +729,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] !mt-[45px]">
             <div class="flex flex-row">
               <div>
-                <img src="assets/img/illustrations/ni1.png" class="!w-[4rem] !mr-5" alt="image">
+                <img src="../assets/img/illustrations/ni1.png" class="!w-[4rem] !mr-5" alt="image">
               </div>
               <div>
                 <h3 class="!mb-2 !text-white">Marketing Automation</h3>
@@ -741,7 +741,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] !mt-[45px]">
             <div class="flex flex-row">
               <div>
-                <img src="assets/img/illustrations/ni2.png" class="!w-[4rem] !mr-5" alt="image">
+                <img src="../assets/img/illustrations/ni2.png" class="!w-[4rem] !mr-5" alt="image">
               </div>
               <div>
                 <h3 class="!mb-2 !text-white">Project Management</h3>
@@ -753,7 +753,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] !mt-[45px]">
             <div class="flex flex-row">
               <div>
-                <img src="assets/img/illustrations/ni3.png" class="!w-[4rem] !mr-5" alt="image">
+                <img src="../assets/img/illustrations/ni3.png" class="!w-[4rem] !mr-5" alt="image">
               </div>
               <div>
                 <h3 class="!mb-2 !text-white">Web Analytics</h3>
@@ -765,7 +765,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] !mt-[45px]">
             <div class="flex flex-row">
               <div>
-                <img src="assets/img/illustrations/ni4.png" class="!w-[4rem] !mr-5" alt="image">
+                <img src="../assets/img/illustrations/ni4.png" class="!w-[4rem] !mr-5" alt="image">
               </div>
               <div>
                 <h3 class="!mb-2 !text-white">SEO Services</h3>
@@ -777,7 +777,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] !mt-[45px]">
             <div class="flex flex-row">
               <div>
-                <img src="assets/img/illustrations/ni5.png" class="!w-[4rem] !mr-5" alt="image">
+                <img src="../assets/img/illustrations/ni5.png" class="!w-[4rem] !mr-5" alt="image">
               </div>
               <div>
                 <h3 class="!mb-2 !text-white">Market Research</h3>
@@ -789,7 +789,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] !mt-[45px]">
             <div class="flex flex-row">
               <div>
-                <img src="assets/img/illustrations/ni6.png" class="!w-[4rem] !mr-5" alt="image">
+                <img src="../assets/img/illustrations/ni6.png" class="!w-[4rem] !mr-5" alt="image">
               </div>
               <div>
                 <h3 class="!mb-2 !text-white">Social Media Management</h3>
@@ -808,7 +808,7 @@
       <div class="container py-[5rem] xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem]">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] items-center">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:!order-2 lg:!order-2 !relative !mt-[50px]">
-            <figure class="rounded-[0.4rem]"><img class="max-w-full h-auto rounded-[0.4rem]" src="assets/img/photos/about27.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem]"><img class="max-w-full h-auto rounded-[0.4rem]" src="../assets/img/photos/about27.jpg" alt="image"></figure>
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !absolute xl:block lg:block md:block max-sm:!hidden" style="top: 15%; left: -7%">
               <div class="card-body py-4 px-5">
                 <div class="flex flex-row items-center">
@@ -866,7 +866,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
             <article>
               <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b4.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                   </figcaption>
@@ -899,7 +899,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
             <article>
               <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b5.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                   </figcaption>
@@ -932,7 +932,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
             <article>
               <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-                <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../assets/img/photos/b6.jpg" alt="image"></a>
                   <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                     <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                   </figcaption>
@@ -980,21 +980,21 @@
         <!-- /.row -->
         <ul class="nav nav-tabs nav-tabs-bg flex justify-between nav-justified xl:!flex-row lg:!flex-row flex-col !border-transparent">
           <li class="nav-item !mb-[20px]"> <a class="nav-link !flex flex-row hover:!shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] active" data-bs-toggle="tab" href="#tab2-1">
-              <div><img src="assets/img/illustrations/ni7.png" class="svg-inject icon-svg icon-svg-md !w-[4rem] !text-[#fab758] !mr-[1.25rem]" alt="image"></div>
+              <div><img src="../assets/img/illustrations/ni7.png" class="svg-inject icon-svg icon-svg-md !w-[4rem] !text-[#fab758] !mr-[1.25rem]" alt="image"></div>
               <div>
                 <h3 class="!mb-2">Easy Usage</h3>
                 <p>Duis mollis commodo luctus cursus commodo tortor.</p>
               </div>
             </a> </li>
           <li class="nav-item !mb-[20px]"> <a class="nav-link !flex flex-row hover:!shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-bs-toggle="tab" href="#tab2-2">
-              <div><img src="assets/img/illustrations/ni8.png" class="svg-inject icon-svg icon-svg-md !w-[4rem] !text-[#45c4a0] !mr-[1.25rem]" alt="image"></div>
+              <div><img src="../assets/img/illustrations/ni8.png" class="svg-inject icon-svg icon-svg-md !w-[4rem] !text-[#45c4a0] !mr-[1.25rem]" alt="image"></div>
               <div>
                 <h3 class="!mb-2">Fast Transactions</h3>
                 <p>Vivamus sagittis lacus augue fusce dapibus tellus nibh.</p>
               </div>
             </a> </li>
           <li class="nav-item !mb-[20px]"> <a class="nav-link !flex flex-row hover:!shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-bs-toggle="tab" href="#tab2-3">
-              <div><img src="assets/img/illustrations/ni9.png" class="svg-inject icon-svg icon-svg-md !w-[4rem] !text-[#e2626b] !mr-[1.25rem]" alt="image"></div>
+              <div><img src="../assets/img/illustrations/ni9.png" class="svg-inject icon-svg icon-svg-md !w-[4rem] !text-[#e2626b] !mr-[1.25rem]" alt="image"></div>
               <div>
                 <h3 class="!mb-2">Secure Payments</h3>
                 <p>Vestibulum ligula porta felis maecenas faucibus mollis.</p>
@@ -1008,12 +1008,12 @@
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
                 <div class="flex flex-wrap mx-[-12.5px] !mt-[-25px] items-center">
                   <div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !ml-auto" src="assets/img/photos/sa13.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !ml-auto" src="../assets/img/photos/sa13.jpg" alt="image">
                   </div>
                   <!-- /column -->
                   <div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="assets/img/photos/sa14.jpg" alt="image">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="assets/img/photos/sa15.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="../assets/img/photos/sa14.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="../assets/img/photos/sa15.jpg" alt="image">
                   </div>
                   <!-- /column -->
                 </div>
@@ -1040,13 +1040,13 @@
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] xl:!order-2 lg:!order-2">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-5/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto" src="assets/img/photos/sa9.jpg" alt="image">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" src="assets/img/photos/sa10.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto" src="../assets/img/photos/sa9.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" src="../assets/img/photos/sa10.jpg" alt="image">
                   </div>
                   <!-- /column -->
                   <div class="w-7/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="assets/img/photos/sa11.jpg" alt="image">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" src="assets/img/photos/sa12.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="../assets/img/photos/sa11.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" src="../assets/img/photos/sa12.jpg" alt="image">
                   </div>
                   <!-- /column -->
                 </div>
@@ -1073,13 +1073,13 @@
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="assets/img/photos/sa5.jpg" alt="image">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" src="assets/img/photos/sa6.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="../assets/img/photos/sa5.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" src="../assets/img/photos/sa6.jpg" alt="image">
                   </div>
                   <!-- /column -->
                   <div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5" src="assets/img/photos/sa7.jpg" alt="image">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="assets/img/photos/sa8.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5" src="../assets/img/photos/sa7.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="../assets/img/photos/sa8.jpg" alt="image">
                   </div>
                   <!-- /column -->
                 </div>
@@ -1121,7 +1121,7 @@
         <!-- /.row -->
       </div>
       <!-- /.container -->
-      <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/bg12.jpg" alt="image"></figure>
+      <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/bg12.jpg" alt="image"></figure>
     </section>
     <!-- /section -->
     <section class="wrapper gradient-8 !relative before:content-[''] before:absolute before:w-full before:h-full before:bg-cover before:pointer-events-none before:left-0 before:top-0 before:bg-no-repeat before:bg-[center_center] before:bg-[url(./assets/img/photos/lines.png)]">
@@ -1140,7 +1140,7 @@
                             <blockquote class="!border-0 text-[1rem] !mb-2">
                               <p>“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio.”</p>
                               <div class="flex items-center text-left justify-center">
-                                <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te1.jpg" alt="image">
+                                <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te1.jpg" alt="image">
                                 <div class="info !pl-4">
                                   <h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
                                   <p class="!mb-0 text-[.8rem]">Financial Analyst</p>
@@ -1154,7 +1154,7 @@
                             <blockquote class="!border-0 text-[1rem] !mb-2">
                               <p>“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio.”</p>
                               <div class="flex items-center text-left justify-center">
-                                <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te2.jpg" alt="image">
+                                <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te2.jpg" alt="image">
                                 <div class="info !pl-4">
                                   <h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Cory Zamora</h5>
                                   <p class="!mb-0 text-[.8rem]">Marketing Specialist</p>
@@ -1168,7 +1168,7 @@
                             <blockquote class="!border-0 text-[1rem] !mb-2">
                               <p>“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio.”</p>
                               <div class="flex items-center text-left justify-center">
-                                <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te3.jpg" alt="image">
+                                <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te3.jpg" alt="image">
                                 <div class="info !pl-4">
                                   <h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Nikolas Brooten</h5>
                                   <p class="!mb-0 text-[.8rem]">Sales Manager</p>
@@ -1215,7 +1215,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1293,8 +1293,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo33.html b/public/html/demo33.html
index 16695c7..c5324f5 100644
--- a/public/html/demo33.html
+++ b/public/html/demo33.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/navy.css">
-  <link rel="preload" href="assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/navy.css">
+  <link rel="preload" href="../assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
         background: #343f52 !important;
@@ -38,7 +38,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -55,205 +55,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -367,87 +367,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -572,7 +572,7 @@
           <div class="!absolute shape grape hidden  xl:block lg:block w-6" style="bottom: 28%; right: 5%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/circle.svg" class="svg-inject icon-svg !w-full !h-full"><g data-name="Layer 2"><path class="svg-fill" d="M250 0C111.93 0 0 111.93 0 250s111.93 250 250 250 250-111.93 250-250S388.07 0 250 0zm0 425a175 175 0 11175-175 175 175 0 01-175 175z" data-name="Layer 1"></path></g></svg></div>
           <div class="flex flex-wrap mx-[-15px]">
             <div class="lg:w-9/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-              <h1 class="font-semibold !leading-[1.15] xl:!text-[3.5rem] !text-[calc(1.475rem_+_2.7vw)] md:!px-10 lg:!px-0 xl:!px-8 !mb-5">👋 Hello! I'm <img class="inline !w-[3.5rem] mx-1" src="assets/img/avatars/avatar.png" alt="image"> Camille, a product designer.</h1>
+              <h1 class="font-semibold !leading-[1.15] xl:!text-[3.5rem] !text-[calc(1.475rem_+_2.7vw)] md:!px-10 lg:!px-0 xl:!px-8 !mb-5">👋 Hello! I'm <img class="inline !w-[3.5rem] mx-1" src="../assets/img/avatars/avatar.png" alt="image"> Camille, a product designer.</h1>
               <p class="lead !text-[1.2rem] !leading-[1.6] md:!px-10 lg:!px-0 xl:!px-0 lg:mx-[-2.5rem] xl:mx-0 !mb-8">I’m very passionate about the work that I do, and if you are curious you can find my works on <a href="#" class="hover !text-[#60697b]">Dribbble</a>, my portfolio on <a href="#" class="hover !text-[#60697b]">Behance</a>.</p>
               <a href="#" class="btn btn-lg btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] btn-icon btn-icon-end">See My Works <i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></a>
             </div>
@@ -699,7 +699,7 @@
               </div>
               <!-- /column -->
               <div class="xl:w-7/12 xl:!ml-[8.33333333%] lg:w-7/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end">
-                <figure class="m-0 p-0"><img class="max-w-full h-auto" src="assets/img/photos/f1.png" alt="image"></figure>
+                <figure class="m-0 p-0"><img class="max-w-full h-auto" src="../assets/img/photos/f1.png" alt="image"></figure>
               </div>
               <!-- /column -->
             </div>
@@ -719,7 +719,7 @@
               </div>
               <!-- /column -->
               <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px]">
-                <figure class="m-0 p-0"><img class="max-w-full h-auto" src="assets/img/photos/f2.png" alt="image"></figure>
+                <figure class="m-0 p-0"><img class="max-w-full h-auto" src="../assets/img/photos/f2.png" alt="image"></figure>
               </div>
               <!-- /column -->
             </div>
@@ -738,7 +738,7 @@
                 <a href="#" class="btn btn-sm btn-leaf !text-white !bg-[#7cb798] border-[#7cb798] hover:text-white hover:bg-[#7cb798] hover:!border-[#7cb798] focus:shadow-[rgba(113,165,142,1)] active:text-white active:bg-[#7cb798] active:border-[#7cb798] disabled:text-white disabled:bg-[#7cb798] disabled:border-[#7cb798] btn-icon btn-icon-end !text-[0.75rem] !mb-10">See Project <i class="uil uil-arrow-up-right before:content-['\e950']"></i></a>
               </div>
               <!--/.card-body -->
-              <img class="card-img-bottom" src="assets/img/photos/f3.png" alt="image">
+              <img class="card-img-bottom" src="../assets/img/photos/f3.png" alt="image">
             </div>
             <!--/.card -->
           </div>
@@ -752,7 +752,7 @@
                 <a href="#" class="btn btn-sm btn-pink !text-white !bg-[#d16b86] border-[#d16b86] hover:text-white hover:bg-[#d16b86] hover:!border-[#d16b86]   active:text-white active:bg-[#d16b86] active:border-[#d16b86] disabled:text-white disabled:bg-[#d16b86] disabled:border-[#d16b86] btn-icon btn-icon-end !text-[0.75rem] !mb-10">See Project <i class="uil uil-arrow-up-right before:content-['\e950']"></i></a>
               </div>
               <!--/.card-body -->
-              <img class="card-img-bottom" src="assets/img/photos/f4.png" alt="image">
+              <img class="card-img-bottom" src="../assets/img/photos/f4.png" alt="image">
             </div>
             <!--/.card -->
           </div>
@@ -764,7 +764,7 @@
     </section>
     <!-- /section -->
     <section class="section-frame xxl:!mx-12">
-      <div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 section-frame-wrapper bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)]" data-image-src="assets/img/photos/bg23.png">
+      <div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 section-frame-wrapper bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)]" data-image-src="../assets/img/photos/bg23.png">
         <div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
           <div class="flex flex-wrap mx-[-15px]">
             <div class="md:w-10/12 lg:w-9/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
@@ -906,7 +906,7 @@
       <div class="container py-[6rem] xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
         <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center xl:!mt-[8rem] lg:!mt-[8rem] !mb-[6rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
           <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mx-auto !mt-[50px]">
-            <div class="img-mask mask-3 xxl:!px-5"><img src="assets/img/avatars/avatar.jpg" alt="image"></div>
+            <div class="img-mask mask-3 xxl:!px-5"><img src="../assets/img/avatars/avatar.jpg" alt="image"></div>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
@@ -962,7 +962,7 @@
     </section>
     <!-- /section -->
     <section class="section-frame xl:mx-6 xl:rounded-[1rem] lg:mx-6 lg:rounded-[1rem] md:mx-6 md:rounded-[1rem] xxl:!mx-12 overflow-hidden">
-      <div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500  bg-[center_center] bg-no-repeat bg-scroll relative z-0  before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)]" data-image-src="assets/img/photos/bg23.png">
+      <div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500  bg-[center_center] bg-no-repeat bg-scroll relative z-0  before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)]" data-image-src="../assets/img/photos/bg23.png">
         <div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem] !text-center">
           <div class="!absolute shape yellow hidden xl:block lg:block w-5" style="top: 18%; left: 5%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219.5 219.5" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/pie.svg" class="svg-inject icon-svg !w-full !h-full"><path class="svg-fill" d="M219.5 219.5H0c0-58.19 23.14-114.06 64.29-155.21A219.561 219.561 0 01219.5 0v219.5z"></path></svg></div>
           <div class="!absolute shape leaf hidden  xl:block lg:block !w-[2.5rem]" style="bottom: 30%; left: 2%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457.71 446.45" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/scribble.svg" class="svg-inject icon-svg !w-full !h-full"><path class="svg-fill" d="M205.62 442.54c-.51-.41-.99-.84-1.46-1.31-10.4-10.39-3.61-27.12 11.63-52.5 11.72-19.51 28.48-43.74 46.22-69.39 17.53-25.34 35.66-51.54 49.01-73.47 14.73-24.19 18.57-35.01 19.51-39.48-3.86-.28-13.15.3-33.78 6.52-19.71 5.94-43.09 14.92-65.7 23.6-63.8 24.49-85.35 31.41-96.51 19.5-3.21-3.43-7.62-11.04-1.12-23.54 2.49-4.79 6.64-10.51 12.68-17.5 10.4-12.03 25.04-26.34 40.55-41.49 14.02-13.7 28.53-27.87 39.53-40.11 9.93-11.04 14.15-17.43 15.94-20.82-3.43-.75-10.24-1.51-23.25-.92-14.99.68-33.44 2.89-51.28 5.02-46.92 5.61-74.09 8.33-86.81-.99-4.78-3.5-7.67-8.42-8.41-14.24-1.97-15.58 12.45-33.15 29.14-53.5 5.31-6.47 13.31-16.22 17.36-22.68-4.51-.38-12.43-.4-25.97 1.1-16.54 1.82-35.62 5.22-50.95 7.96-12.62 2.25-22.6 4.03-28.48 4.49C6.6 39.3.58 34.17.04 27.28c-.54-6.88 4.6-12.9 11.48-13.44 4.66-.37 14.58-2.13 26.06-4.18C54.56 6.63 75.7 2.86 94 1.07c26.41-2.6 40.16-.54 47.48 7.13 7.01 7.34 6.45 17.66-1.68 30.66-4.72 7.55-11.63 15.98-18.95 24.9-6.18 7.53-12.57 15.31-17.24 22.19-3.35 4.92-4.95 8.13-5.71 10.07 3 .54 9.09 1.08 20.87.43 13.21-.73 29.07-2.63 45.86-4.64 59.99-7.17 94.33-10.22 102.49 10.62 7.4 18.93-16.51 43.51-62.99 88.92-12.69 12.4-24.68 24.11-34.04 34.28-3.17 3.45-5.68 6.34-7.67 8.75 15.88-4.42 41.18-14.13 59.67-21.22 62.4-23.96 101.69-37.87 121.09-29.14 5.38 2.42 9.26 6.47 11.23 11.72 7.48 19.95-16.15 57.31-71.83 137.82-15.49 22.39-30.12 43.55-41.18 61.25-7.13 11.4-11.3 19.11-13.75 24.25 8.97-3.3 25.58-11 55.73-28.8 32.68-19.29 70.61-44.04 101.09-63.94 24.62-16.07 44.07-28.76 54.65-34.68 6.03-3.37 13.64-1.22 17.01 4.81 3.37 6.03 1.22 13.64-4.81 17.01-9.83 5.5-29.92 18.61-53.18 33.79-33.46 21.84-75.1 49.01-110.05 69.21-49.35 28.51-70.85 35.44-82.46 26.07z"></path></svg></div>
@@ -1007,8 +1007,8 @@
       <path class="fill-none stroke-[#343f52] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo34.html b/public/html/demo34.html
index 007641d..3ce5e9e 100644
--- a/public/html/demo34.html
+++ b/public/html/demo34.html
@@ -13,12 +13,12 @@
     content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-  <link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+  <link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/purple.css">
-  <link rel="preload" href="assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/purple.css">
+  <link rel="preload" href="../assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .filter:not(.basic-filter) ul li a.active,
     .filter:not(.basic-filter) ul li a:hover {
@@ -59,7 +59,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -81,7 +81,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi1.jpg" alt="image">
+                                src="../assets/img/demos/mi1.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
@@ -89,7 +89,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi2.jpg" alt="image">
+                                src="../assets/img/demos/mi2.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
@@ -97,7 +97,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi3.jpg" alt="image">
+                                src="../assets/img/demos/mi3.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
@@ -105,7 +105,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi4.jpg" alt="image">
+                                src="../assets/img/demos/mi4.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
@@ -113,7 +113,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi5.jpg" alt="image">
+                                src="../assets/img/demos/mi5.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
@@ -121,7 +121,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi6.jpg" alt="image">
+                                src="../assets/img/demos/mi6.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
@@ -129,7 +129,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi7.jpg" alt="image">
+                                src="../assets/img/demos/mi7.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
@@ -137,7 +137,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi8.jpg" alt="image">
+                                src="../assets/img/demos/mi8.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
@@ -145,7 +145,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi9.jpg" alt="image">
+                                src="../assets/img/demos/mi9.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
@@ -153,7 +153,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi10.jpg"
+                                src="../assets/img/demos/mi10.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
@@ -161,7 +161,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi11.jpg"
+                                src="../assets/img/demos/mi11.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
@@ -169,7 +169,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi12.jpg"
+                                src="../assets/img/demos/mi12.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
@@ -177,7 +177,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi13.jpg"
+                                src="../assets/img/demos/mi13.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
@@ -185,7 +185,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi14.jpg"
+                                src="../assets/img/demos/mi14.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
@@ -193,7 +193,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi15.jpg"
+                                src="../assets/img/demos/mi15.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
@@ -201,7 +201,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi16.jpg"
+                                src="../assets/img/demos/mi16.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
@@ -209,7 +209,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi17.jpg"
+                                src="../assets/img/demos/mi17.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
@@ -217,7 +217,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi18.jpg"
+                                src="../assets/img/demos/mi18.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
@@ -225,7 +225,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi19.jpg"
+                                src="../assets/img/demos/mi19.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
@@ -233,7 +233,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi20.jpg"
+                                src="../assets/img/demos/mi20.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
@@ -241,7 +241,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi21.jpg"
+                                src="../assets/img/demos/mi21.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
@@ -249,7 +249,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi22.jpg"
+                                src="../assets/img/demos/mi22.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
@@ -257,7 +257,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi23.jpg"
+                                src="../assets/img/demos/mi23.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
@@ -265,7 +265,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi24.jpg"
+                                src="../assets/img/demos/mi24.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
@@ -273,7 +273,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi25.jpg"
+                                src="../assets/img/demos/mi25.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
@@ -281,7 +281,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi26.jpg"
+                                src="../assets/img/demos/mi26.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
@@ -289,7 +289,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi27.jpg"
+                                src="../assets/img/demos/mi27.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
@@ -297,7 +297,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi28.jpg"
+                                src="../assets/img/demos/mi28.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
@@ -305,7 +305,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi29.jpg"
+                                src="../assets/img/demos/mi29.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
@@ -313,7 +313,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi30.jpg"
+                                src="../assets/img/demos/mi30.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
@@ -321,7 +321,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi31.jpg"
+                                src="../assets/img/demos/mi31.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
@@ -329,7 +329,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi32.jpg"
+                                src="../assets/img/demos/mi32.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
@@ -337,7 +337,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi33.jpg"
+                                src="../assets/img/demos/mi33.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
@@ -345,7 +345,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi34.jpg"
+                                src="../assets/img/demos/mi34.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
@@ -506,103 +506,103 @@
                         class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -761,31 +761,31 @@
                 data-group="col-start" data-delay="900">
                 <div class="ml-auto !mt-6"><img
                     class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-                    src="assets/img/demos/vc1.jpg" alt="image"></div>
+                    src="../assets/img/demos/vc1.jpg" alt="image"></div>
                 <div class="ml-auto !mt-4"><img
                     class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-                    src="assets/img/demos/vc2.jpg" alt="image"></div>
+                    src="../assets/img/demos/vc2.jpg" alt="image"></div>
                 <div class="ml-auto !mt-4"><img
                     class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-                    src="assets/img/demos/vc3.jpg" alt="image"></div>
+                    src="../assets/img/demos/vc3.jpg" alt="image"></div>
               </div>
               <!-- /column -->
               <div class="w-4/12 flex-[0_0_auto] px-[10px] max-w-full" data-cues="fadeIn" data-group="col-middle">
                 <div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-                    src="assets/img/demos/vc4.jpg" alt="image"></div>
+                    src="../assets/img/demos/vc4.jpg" alt="image"></div>
                 <div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mt-4"
-                    src="assets/img/demos/vc5.jpg" alt="image"></div>
+                    src="../assets/img/demos/vc5.jpg" alt="image"></div>
                 <div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mt-4"
-                    src="assets/img/demos/vc6.jpg" alt="image"></div>
+                    src="../assets/img/demos/vc6.jpg" alt="image"></div>
               </div>
               <!-- /column -->
               <div class="w-4/12 flex-[0_0_auto] px-[10px] max-w-full flex flex-col" data-cues="fadeIn"
                 data-group="col-end" data-delay="900">
                 <div class="!mt-8"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-                    src="assets/img/demos/vc7.jpg" alt="image"></div>
+                    src="../assets/img/demos/vc7.jpg" alt="image"></div>
                 <div class="!mt-4 !mb-10"><img
                     class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-                    src="assets/img/demos/vc8.jpg" alt="image"></div>
+                    src="../assets/img/demos/vc8.jpg" alt="image"></div>
               </div>
               <!-- /column -->
             </div>
@@ -837,14 +837,14 @@
                         <figure class="itooltip itooltip-grape !mt-9"
                           title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='demo18.html' target='_blank'><img
                               class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]"
-                              src="assets/img/demos/d18.jpg"
+                              src="../assets/img/demos/d18.jpg"
                               alt="image"></a></figure>
                       </div>
                       <!-- /column -->
                       <div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
                         <figure class="itooltip itooltip-grape" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='demo18.html' target='_blank'><img
                               class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]"
-                              src="assets/img/demos/d18-2.jpg"
+                              src="../assets/img/demos/d18-2.jpg"
                               alt="image"></a></figure>
                       </div>
                       <!-- /column -->
@@ -905,7 +905,7 @@
                         <figure class="itooltip itooltip-fuchsia !mt-9"
                           title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='demo19.html' target='_blank'><img
                               class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]"
-                              src="assets/img/demos/d19-1.jpg"
+                              src="../assets/img/demos/d19-1.jpg"
                               alt="image"></a></figure>
                       </div>
                       <!-- /column -->
@@ -913,7 +913,7 @@
                         <figure class="itooltip itooltip-fuchsia" title='<h5 class="!mb-0">Click to see the demo</h5>'>
                           <a href='demo19.html' target='_blank'><img
                               class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]"
-                              src="assets/img/demos/d19-2.jpg"
+                              src="../assets/img/demos/d19-2.jpg"
                               alt="image"></a>
                         </figure>
                       </div>
@@ -975,14 +975,14 @@
                         <figure class="itooltip itooltip-purple !mt-9"
                           title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='demo20.html' target='_blank'><img
                               class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]"
-                              src="assets/img/demos/d20.jpg"
+                              src="../assets/img/demos/d20.jpg"
                               alt="image"></a></figure>
                       </div>
                       <!-- /column -->
                       <div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
                         <figure class="itooltip itooltip-purple" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='demo20.html' target='_blank'><img
                               class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]"
-                              src="assets/img/demos/d20-2.jpg"
+                              src="../assets/img/demos/d20-2.jpg"
                               alt="image"></a></figure>
                       </div>
                       <!-- /column -->
@@ -1053,7 +1053,7 @@
       <div class="container pt-7 xl:pt-10 lg:pt-10 md:pt-10 pb-[4.5rem] xl:pb-28 lg:pb-28 md:pb-28">
         <div class="flex flex-wrap mx-[-15px] !mb-8 !text-center">
           <div class="md:w-11/12 lg:w-10/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-            <img class="m-[0_auto]" src="assets/img/demos/icon.png"
+            <img class="m-[0_auto]" src="../assets/img/demos/icon.png"
               alt="image">
             <h2
               class="!text-[calc(1.335rem_+_1.02vw)] font-bold !leading-[1.2] xl:!text-[2.1rem] !mb-3 !text-center !mt-3 lg:!px-10 xl:!px-0">
@@ -1108,22 +1108,22 @@
               <div
                 class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
                 <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5"
-                  data-cue="fadeIn" data-delay="300" src="assets/img/demos/fe1.jpg"
+                  data-cue="fadeIn" data-delay="300" src="../assets/img/demos/fe1.jpg"
  alt="image">
                 <img
                   class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto"
-                  data-cue="fadeIn" data-delay="600" src="assets/img/demos/fe2.jpg"
+                  data-cue="fadeIn" data-delay="600" src="../assets/img/demos/fe2.jpg"
  alt="image">
               </div>
               <!-- /column -->
               <div
                 class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
                 <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5"
-                  data-cue="fadeIn" data-delay="900" src="assets/img/demos/fe3.jpg"
+                  data-cue="fadeIn" data-delay="900" src="../assets/img/demos/fe3.jpg"
  alt="image">
                 <img
                   class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]"
-                  data-cue="fadeIn" data-delay="1200" src="assets/img/demos/fe4.jpg"
+                  data-cue="fadeIn" data-delay="1200" src="../assets/img/demos/fe4.jpg"
  alt="image">
               </div>
               <!-- /column -->
@@ -1185,22 +1185,22 @@
                 class="w-5/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
                 <img
                   class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto"
-                  data-cue="fadeIn" data-delay="300" src="assets/img/demos/fe5.jpg"
+                  data-cue="fadeIn" data-delay="300" src="../assets/img/demos/fe5.jpg"
  alt="image">
                 <img
                   class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto"
-                  data-cue="fadeIn" data-delay="600" src="assets/img/demos/fe6.jpg"
+                  data-cue="fadeIn" data-delay="600" src="../assets/img/demos/fe6.jpg"
  alt="image">
               </div>
               <!-- /column -->
               <div
                 class="w-7/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
                 <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5"
-                  data-cue="fadeIn" data-delay="900" src="assets/img/demos/fe7.jpg"
+                  data-cue="fadeIn" data-delay="900" src="../assets/img/demos/fe7.jpg"
  alt="image">
                 <img
                   class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]"
-                  data-cue="fadeIn" data-delay="1200" src="assets/img/demos/fe8.jpg"
+                  data-cue="fadeIn" data-delay="1200" src="../assets/img/demos/fe8.jpg"
  alt="image">
               </div>
               <!-- /column -->
@@ -1273,15 +1273,15 @@
             class="w-9/12 sm:w-10/12 md:w-10/12 lg:w-9/12 xl:w-9/12 flex-[0_0_auto] max-w-full !mx-auto !mt-[-5rem] xl:!mt-[-17.5rem] lg:!mt-[-17.5rem] md:!mt-[-17.5rem]"
             data-cues data-group="images">
             <img class="max-w-full h-auto !mx-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-              data-cue="fadeIn" src="assets/img/demos/de1.jpg" alt="image">
+              data-cue="fadeIn" src="../assets/img/demos/de1.jpg" alt="image">
             <img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-              data-cue="slideInRight" src="assets/img/demos/de2.jpg"
+              data-cue="slideInRight" src="../assets/img/demos/de2.jpg"
               style="top: 25%; right:-12%; max-width:30%; height: auto;" alt="image">
             <img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-              data-cue="slideInLeft" src="assets/img/demos/de3.jpg"
+              data-cue="slideInLeft" src="../assets/img/demos/de3.jpg"
               style="top: 15%; left:-15%; max-width:30%; height: auto;" alt="image">
             <img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-              data-cue="slideInLeft" src="assets/img/demos/de4.jpg"
+              data-cue="slideInLeft" src="../assets/img/demos/de4.jpg"
               style="bottom: 15%; left:-13%; max-width:30%; height: auto;" alt="image">
           </div>
           <!-- /column -->
@@ -1292,70 +1292,70 @@
           data-cues="slideInDown" data-group="features-3">
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi1.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi1.png"
               alt="image">
             <h4>Built with <br> Tailwind CSS</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi2.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi2.png"
               alt="image">
             <h4>SEO-friendly <br> Coding</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi3.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi3.png"
               alt="image">
             <h4>Valid W3C <br> HTML5 & CSS3</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi4.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi4.png"
               alt="image">
             <h4>Retina-ready <br> Graphics</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi5.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi5.png"
               alt="image">
             <h4>One-page <br> Layout Option</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi6.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi6.png"
               alt="image">
             <h4>Isotope <br> Filterable Gallery</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi7.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi7.png"
               alt="image">
             <h4>Mailchimp <br> Compatible </h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi8.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi8.png"
               alt="image">
             <h4>Contact Form <br> w/o Page Refresh</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi9.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi9.png"
               alt="image">
             <h4>Animations <br> on Page Scroll</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi10.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi10.png"
               alt="image">
             <h4>Top-Notch Support <br> & Free Updates</h4>
           </div>
@@ -1420,7 +1420,7 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full services md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">Services Modern</h5>'><a href='services.html'> <img
-                      src="assets/img/demos/dc1.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc1.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
@@ -1428,7 +1428,7 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full services md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">Services Concept</h5>'><a href='services2.html'> <img
-                      src="assets/img/demos/dc2.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc2.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
@@ -1436,7 +1436,7 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full about md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">About Modern</h5>'><a href='about.html'> <img
-                      src="assets/img/demos/dc3.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc3.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
@@ -1444,7 +1444,7 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full contact md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">Contact with Facts</h5>'><a href='contact.html'> <img
-                      src="assets/img/demos/dc5.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc5.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
@@ -1452,7 +1452,7 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full about md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">About Concept</h5>'><a href='about2.html'> <img
-                      src="assets/img/demos/dc4.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc4.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
@@ -1460,7 +1460,7 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full contact md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">Contact Minimalist</h5>'><a href='contact2.html'> <img
-                      src="assets/img/demos/dc6.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc6.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
@@ -1468,14 +1468,14 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full contact md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">Contact Modern</h5>'><a href='contact3.html'> <img
-                      src="assets/img/demos/dc7.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc7.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
               <div
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full pricing md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
-                  title='<h5 class="!mb-0">Pricing</h5>'><a href='pricing.html'> <img src="assets/img/demos/dc8.jpg"
+                  title='<h5 class="!mb-0">Pricing</h5>'><a href='pricing.html'> <img src="../assets/img/demos/dc8.jpg"
  alt="image"></a></figure>
               </div>
               <!-- /.project -->
@@ -1483,7 +1483,7 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full projects md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">Projects with Tiles</h5>'><a href='projects.html'> <img
-                      src="assets/img/demos/dc9.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc9.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
@@ -1491,7 +1491,7 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full projects md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">Projects Masonry</h5>'><a href='projects4.html'> <img
-                      src="assets/img/demos/dc12.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc12.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
@@ -1499,7 +1499,7 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full projects md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">Projects Masonry Large</h5>'><a href='projects3.html'> <img
-                      src="assets/img/demos/dc11.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc11.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
@@ -1507,7 +1507,7 @@
                 class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full projects md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
                 <figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
                   title='<h5 class="!mb-0">Projects Overflow</h5>'><a href='projects2.html'> <img
-                      src="assets/img/demos/dc10.jpg" alt="image"></a>
+                      src="../assets/img/demos/dc10.jpg" alt="image"></a>
                 </figure>
               </div>
               <!-- /.project -->
@@ -1535,7 +1535,7 @@
       <div class="container xl:pt-40 lg:pt-40 pb-32 xxl:pb-40 !relative">
         <img
           class="xl:!absolute lg:!absolute max-lg:!static max-w-full w-full flex-[0_0_auto] !px-[15px] xxl:!mt-[-0.75rem] !mb-3 md:!mb-10 lg:!mb-0"
-          src="assets/img/demos/devices.png" data-cue="fadeIn"
+          src="../assets/img/demos/devices.png" data-cue="fadeIn"
           alt="image" style="top: 0; left: -23%;">
         <div
           class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] lg:!mt-[-6rem] xl:!mt-[-3.5rem] xxl:!mt-0 xxl:!items-center">
@@ -1549,7 +1549,7 @@
               <p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">Trunçgil is responsive so the layout will
                 adapt to different screen sizes that will make your website compatible with any device such as smart
                 phones, tablets and computers.</p>
-              <img src="assets/img/demos/qrcode.jpg"
+              <img src="../assets/img/demos/qrcode.jpg"
                 class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-[.4rem] max-lg:m-[0_auto]"
                 alt="image">
             </div>
@@ -1566,7 +1566,7 @@
       <div class="container xl:!pt-10 !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="md:w-10/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-            <img class="m-[0_auto]" src="assets/img/demos/icon.png"
+            <img class="m-[0_auto]" src="../assets/img/demos/icon.png"
               alt="image">
             <h2
               class="!text-[calc(1.335rem_+_1.02vw)] font-bold !leading-[1.2] xl:!text-[2.1rem] !mt-3 !mb-3 xl:!px-8 lg:!px-8">
@@ -1581,7 +1581,7 @@
           <!-- /column -->
         </div>
         <!-- /.row -->
-        <img class="max-w-full h-auto m-[0_auto]" src="assets/img/demos/f1.png"
+        <img class="max-w-full h-auto m-[0_auto]" src="../assets/img/demos/f1.png"
  data-cue="fadeIn" alt="image">
       </div>
       <!-- /.container -->
@@ -1595,7 +1595,7 @@
         <div
           class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.
             </p>
             <nav class="nav social social-white">
@@ -1696,8 +1696,8 @@
         d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo4.html b/public/html/demo4.html
index e2c695f..30386a3 100644
--- a/public/html/demo4.html
+++ b/public/html/demo4.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/violet.css">
-  <link rel="preload" href="assets/css/fonts/dm.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/violet.css">
+  <link rel="preload" href="../assets/css/fonts/dm.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .accordion-wrapper .card-header button{
       color: #a07cc5;
@@ -31,7 +31,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -48,205 +48,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -360,87 +360,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -598,11 +598,11 @@
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="xl:w-10/12 xl:!ml-[16.66666667%] lg:w-10/12 lg:!ml-[16.66666667%] md:w-10/12 md:!ml-[16.66666667%] w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
-                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/ab1.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/ab1.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                   <div class="w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
-                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/ab2.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/ab2.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                 </div>
@@ -610,7 +610,7 @@
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/ab3.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/ab3.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -722,19 +722,19 @@
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] !px-[15px] !mt-[80px] max-w-full xl:!order-2 lg:!order-2">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[16.66666667%] !self-end !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g1.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g1.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !self-end !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g2.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g2.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%] !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g3.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g3.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-start !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g4.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g4.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -796,11 +796,11 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-    <section class="wrapper image-wrapper bg-image bg-overlay !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="assets/img/photos/bg1.jpg">
+    <section class="wrapper image-wrapper bg-image bg-overlay !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="../assets/img/photos/bg1.jpg">
       <div class="container py-[8rem] !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="lg:w-10/12 xl:w-10/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-            <a href="assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !relative z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
+            <a href="../assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !relative z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]  before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
             <h2 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !leading-[1.2] font-DMSerif !font-normal tracking-normal lg:!px-10 xl:!px-16 xxl:!px-10 !text-white">Find out everything you need to know about creating a business process model.</h2>
           </div>
           <!--/column -->
@@ -848,7 +848,7 @@
           <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] xl:!mt-0 max-w-full">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="card-body flex-[1_1_auto] p-[40px]">
-                <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te1.jpg" alt="image">
+                <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te1.jpg" alt="image">
                 <h4 class="!mb-1">Coriss Ambady</h4>
                 <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Financial Analyst</div>
                 <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -867,7 +867,7 @@
           <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] xl:!mt-0 max-w-full">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="card-body flex-[1_1_auto] p-[40px]">
-                <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te2.jpg" alt="image">
+                <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te2.jpg" alt="image">
                 <h4 class="!mb-1">Cory Zamora</h4>
                 <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Marketing Specialist</div>
                 <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -886,7 +886,7 @@
           <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] xl:!mt-0 max-w-full">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="card-body flex-[1_1_auto] p-[40px]">
-                <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te3.jpg" alt="image">
+                <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te3.jpg" alt="image">
                 <h4 class="!mb-1">Nikolas Brooten</h4>
                 <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Sales Manager</div>
                 <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -905,7 +905,7 @@
           <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] xl:!mt-0 max-w-full">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="card-body flex-[1_1_auto] p-[40px]">
-                <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te4.jpg" alt="image">
+                <img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te4.jpg" alt="image">
                 <h4 class="!mb-1">Jackie Sanders</h4>
                 <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Investment Planner</div>
                 <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
@@ -930,13 +930,13 @@
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[30px] max-w-full !relative">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
-                <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="assets/img/photos/g5.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="../assets/img/photos/g5.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
-                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g6.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g6.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                   <div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
@@ -1011,27 +1011,27 @@
         <div class="lg:!px-5 xl:!px-5 !mb-24 xl:!mb-60 lg:!mb-60 md:!mb-60">
           <div class="flex flex-wrap mx-0 md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-40px] items-center">
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c1.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c1.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c2.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c2.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c3.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c3.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c4.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c4.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c5.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c5.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c6.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c6.png" alt="image"></figure>
             </div>
             <!--/column -->
           </div>
@@ -1048,7 +1048,7 @@
     <div class="container">
       <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mt-[-6rem] xl:!mt-[-12.5rem] lg:!mt-[-12.5rem] md:!mt-[-12.5rem] !mb-20 xl:!mb-[4.5rem] lg:!mb-[4.5rem] md:!mb-[4.5rem]">
         <div class="flex flex-wrap mx-0">
-          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start hidden xl:block lg:block md:block bg-cover bg-[center_center] bg-no-repeat !bg-scroll md:min-h-[25rem]" data-image-src="assets/img/photos/tm1.jpg">
+          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start hidden xl:block lg:block md:block bg-cover bg-[center_center] bg-no-repeat !bg-scroll md:min-h-[25rem]" data-image-src="../assets/img/photos/tm1.jpg">
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
@@ -1119,8 +1119,8 @@
       <path class="fill-none stroke-[#a07cc5] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo5.html b/public/html/demo5.html
index 1c7a92e..602feac 100644
--- a/public/html/demo5.html
+++ b/public/html/demo5.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -656,10 +656,10 @@
       <div class="container pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 lg:!mb-[12.5rem] xl:!mb-[17.5rem]">
         <div class="flex flex-wrap mx-0 !mb-[6rem]">
           <div class="w-9/12 sm:w-10/12 lg:w-9/12 xl:w-9/12 flex-[0_0_auto] max-w-full !mx-auto !mt-[-5rem] xl:!mt-[-10rem] lg:!mt-[-10rem] md:!mt-[-10rem]" data-cues data-group="images" data-delay="1500">
-            <img class="max-w-full h-auto !mx-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInUp" src="assets/img/photos/sa1.jpg" alt="image">
-            <img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInRight" src="assets/img/photos/sa2.jpg" style="top: 20%; right:-10%; max-width:30%; height: auto;" alt="image">
-            <img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInLeft" src="assets/img/photos/sa3.jpg" style="top: 10%; left:-10%; max-width:30%; height: auto;" alt="image">
-            <img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInLeft" src="assets/img/photos/sa4.jpg" style="bottom: 10%; left:-13%; max-width:30%; height: auto;" alt="image">
+            <img class="max-w-full h-auto !mx-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInUp" src="../assets/img/photos/sa1.jpg" alt="image">
+            <img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInRight" src="../assets/img/photos/sa2.jpg" style="top: 20%; right:-10%; max-width:30%; height: auto;" alt="image">
+            <img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInLeft" src="../assets/img/photos/sa3.jpg" style="top: 10%; left:-10%; max-width:30%; height: auto;" alt="image">
+            <img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInLeft" src="../assets/img/photos/sa4.jpg" style="bottom: 10%; left:-13%; max-width:30%; height: auto;" alt="image">
           </div>
           <!-- /column -->
         </div>
@@ -669,13 +669,13 @@
             <div class="shape rounded !bg-[#fae6e7] rellax !block !absolute" data-rellax-speed="0" style="top: 50%; left: 50%; width: 50%; height: 60%; transform: translate(-50%,-50%);z-index:0"></div>
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !relative">
               <div class="w-6/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] max-w-full !mt-[25px]">
-                <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="assets/img/photos/sa5.jpg" alt="image">
-                <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-[2.5rem]/12 flex-[0_0_auto] !ml-auto" src="assets/img/photos/sa6.jpg" alt="image">
+                <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="../assets/img/photos/sa5.jpg" alt="image">
+                <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-[2.5rem]/12 flex-[0_0_auto] !ml-auto" src="../assets/img/photos/sa6.jpg" alt="image">
               </div>
               <!-- /column -->
               <div class="w-6/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] max-w-full !mt-[25px]">
-                <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5" src="assets/img/photos/sa7.jpg" alt="image">
-                <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-[2.5rem]/12 flex-[0_0_auto]" src="assets/img/photos/sa8.jpg" alt="image">
+                <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5" src="../assets/img/photos/sa7.jpg" alt="image">
+                <img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-[2.5rem]/12 flex-[0_0_auto]" src="../assets/img/photos/sa8.jpg" alt="image">
               </div>
               <!-- /column -->
             </div>
@@ -721,13 +721,13 @@
             <div class="shape rounded !bg-[#e1f6f0] rellax !block !absolute" data-rellax-speed="0" style="top: 50%; left: 50%; width: 50%; height: 60%; transform: translate(-50%,-50%);z-index:0"></div>
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !relative">
               <div class="w-5/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto" data-cue="fadeIn" data-delay="300" src="assets/img/photos/sa9.jpg" alt="image">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" data-cue="fadeIn" data-delay="600" src="assets/img/photos/sa10.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto" data-cue="fadeIn" data-delay="300" src="../assets/img/photos/sa9.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" data-cue="fadeIn" data-delay="600" src="../assets/img/photos/sa10.jpg" alt="image">
               </div>
               <!-- /column -->
               <div class="w-7/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" data-cue="fadeIn" data-delay="900" src="assets/img/photos/sa11.jpg" alt="image">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" data-cue="fadeIn" data-delay="1200" src="assets/img/photos/sa12.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" data-cue="fadeIn" data-delay="900" src="../assets/img/photos/sa11.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" data-cue="fadeIn" data-delay="1200" src="../assets/img/photos/sa12.jpg" alt="image">
               </div>
               <!-- /column -->
             </div>
@@ -773,12 +773,12 @@
             <div class="shape !rounded-[.4rem] !bg-[#fef3e4] rellax !block !absolute " data-rellax-speed="0" style="top: 50%; left: 50%; width: 50%; height: 60%; transform: translate(-50%,-50%);z-index:0"></div>
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !relative items-center">
               <div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] !px-[15px] max-w-full">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !ml-auto" data-cue="fadeIn" data-delay="300" src="assets/img/photos/sa13.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !ml-auto" data-cue="fadeIn" data-delay="300" src="../assets/img/photos/sa13.jpg" alt="image">
               </div>
               <!-- /column -->
               <div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] !px-[15px] max-w-full">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" data-cue="fadeIn" data-delay="900" src="assets/img/photos/sa14.jpg" alt="image">
-                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" data-cue="fadeIn" data-delay="1200" src="assets/img/photos/sa15.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" data-cue="fadeIn" data-delay="900" src="../assets/img/photos/sa14.jpg" alt="image">
+                <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" data-cue="fadeIn" data-delay="1200" src="../assets/img/photos/sa15.jpg" alt="image">
               </div>
               <!-- /column -->
             </div>
@@ -831,9 +831,9 @@
             <div class="lg:!mt-[-10rem] xl:!mt-[-15rem] !relative">
               <div class="shape bg-dot red rellax !w-[6rem] !h-[8rem] absolute z-[1] bg-[radial-gradient(#e2626b_2px,transparent_2.5px)] opacity-50" data-rellax-speed="1" style="top: 1rem; left: -3.9rem;"></div>
               <div class="shape !rounded-[50%] bg-line primary rellax !w-[8rem] !h-[8rem] absolute opacity-50" data-rellax-speed="1" style="bottom: 2rem; right: -3rem;"></div>
-              <video poster="assets/img/photos/movie.jpg" class="player relative z-[2] rounded-[0.4rem]" playsinline controls preload="none">
-                <source src="assets/media/movie.mp4" type="video/mp4">
-                <source src="assets/media/movie.html" type="video/webm">
+              <video poster="../assets/img/photos/movie.jpg" class="player relative z-[2] rounded-[0.4rem]" playsinline controls preload="none">
+                <source src="../assets/media/movie.mp4" type="video/mp4">
+                <source src="../assets/media/movie.html" type="video/webm">
               </video>
             </div>
           </div>
@@ -879,13 +879,13 @@
             <div class="shape bg-dot primary rellax !w-[8rem] !h-[8rem] absolute opacity-50  bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: 0; left: -1.4rem; z-index: 0;"></div>
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
-                <figure class="rounded-[0.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[0.4rem]" src="assets/img/photos/g5.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[0.4rem]" src="../assets/img/photos/g5.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
-                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="assets/img/photos/g6.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="!rounded-[0.4rem]" src="../assets/img/photos/g6.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                   <div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
@@ -960,27 +960,27 @@
         <div class="xl:!px-5 lg:!px-5">
           <div class="flex flex-wrap mx-0 md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-40px] items-center">
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c1.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c1.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c2.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c2.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c3.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c3.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c4.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c4.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c5.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c5.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c6.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c6.png" alt="image"></figure>
             </div>
             <!--/column -->
           </div>
@@ -1099,7 +1099,7 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-    <section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-[0]" data-image-src="assets/img/map.png">
+    <section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-[0]" data-image-src="../assets/img/map.png">
       <div class="container pt-0 pb-[4.5rem] xl:pt-32 lg:pt-32 md:pt-32 xl:pb-32 lg:pb-32 md:pb-32">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -1123,7 +1123,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1201,8 +1201,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo6.html b/public/html/demo6.html
index 73d1e1a..8fde329 100644
--- a/public/html/demo6.html
+++ b/public/html/demo6.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
-  <link rel="preload" href="assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
+  <link rel="preload" href="../assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/aqua.css">
+  <link rel="stylesheet" href="../assets/css/colors/aqua.css">
   
   <style>
     .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
@@ -57,7 +57,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -74,205 +74,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -386,87 +386,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -584,7 +584,7 @@
     <!-- /header -->
     <section class="wrapper !bg-[#eff7fa]">
       <div class="container pt-5 pb-20 lg:py-28 xl:py-36 xl:!pb-[10rem] !relative">
-        <img class="xl:!absolute lg:!absolute max-lg:!left-0 w-full lg:w-10/12 xl:w-11/12 xxl:w-10/12 flex-[0_0_auto] max-w-full lg:!px-5 xl:!px-0 !ml-[-1.25rem] sm:!ml-[-2rem] md:!ml-[-2.5rem] lg:!ml-0 xl:!ml-0 md:!mb-4 lg:!mb-0" src="assets/img/photos/devices.png" data-cue="fadeIn" alt="image" style="top: -1%; left: -21% !important;">
+        <img class="xl:!absolute lg:!absolute max-lg:!left-0 w-full lg:w-10/12 xl:w-11/12 xxl:w-10/12 flex-[0_0_auto] max-w-full lg:!px-5 xl:!px-0 !ml-[-1.25rem] sm:!ml-[-2rem] md:!ml-[-2.5rem] lg:!ml-0 xl:!ml-0 md:!mb-4 lg:!mb-0" src="../assets/img/photos/devices.png" data-cue="fadeIn" alt="image" style="top: -1%; left: -21% !important;">
         <div class="flex flex-wrap mx-0 items-center">
           <div class="md:w-10/12 lg:w-5/12 xl:w-5/12 flex-[0_0_auto] max-w-full md:!ml-[8.33333333%] lg:!ml-[58.33333333%] xxl:!ml-[50%] xxl:!pl-14 xl:!mt-[-2.25rem] lg:!mt-[-2.25rem] md:!mt-[-2.25rem] text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
             <h1 class="xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] !leading-[1.2] font-bold !text-[#343f52] !tracking-[-0.01rem] !mb-4 sm:mx-[-0.5rem] md:mx-0">Get all of your steps, exercise, sleep and meds in one place.</h1>
@@ -688,7 +688,7 @@
         <!--/.row -->        
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-25px] lg:mx-[-20px] items-center lg:!mb-[9rem] xl:!mb-[15rem]">
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] lg:!px-[20px] !px-[15px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/device.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/device.png" alt="image"></figure>
           </div>
           <!-- /column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] lg:!px-[20px] !px-[15px] max-w-full">
@@ -729,8 +729,8 @@
         <div class="flex flex-wrap mx-[-15px]">
           <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
             <div class="lg:!mt-[-10rem] xl:!mt-[-15rem] !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem] !relative" data-cue="slideInUp">
-              <a href="assets/media/movie.mp4" class="btn btn-circle btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#54a8c7] after:!bg-[#54a8c7] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:[animation-delay:.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
-              <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)]"><img class="!rounded-[.4rem]" src="assets/img/photos/v1.jpg" alt="image"></figure>
+              <a href="../assets/media/movie.mp4" class="btn btn-circle btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#54a8c7] after:!bg-[#54a8c7] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:[animation-delay:.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
+              <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)]"><img class="!rounded-[.4rem]" src="../assets/img/photos/v1.jpg" alt="image"></figure>
             </div>
             <h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35] !text-center">FAQ</h2>
             <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-bold !mb-10 lg:!px-14 xl:!px-20 !text-center">If you don't see an answer to your question, you can send us an email from our contact form.</h3>
@@ -863,7 +863,7 @@
                         <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te7.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te7.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-0 !text-[0.95rem] !leading-[1.5]">Coriss Ambady</h5>
                               <p class="!mb-0 !text-[.85rem]">Financial Analyst</p>
@@ -886,7 +886,7 @@
                         <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te8.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te8.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-0 !text-[0.95rem] !leading-[1.5]">Cory Zamora</h5>
                               <p class="!mb-0 !text-[.85rem]">Marketing Specialist</p>
@@ -909,7 +909,7 @@
                         <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te9.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te9.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-0 !text-[0.95rem] !leading-[1.5]">Nikolas Brooten</h5>
                               <p class="!mb-0 !text-[.85rem]">Sales Manager</p>
@@ -932,7 +932,7 @@
                         <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te10.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te10.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-0 !text-[0.95rem] !leading-[1.5]">Coriss Ambady</h5>
                               <p class="!mb-0 !text-[.85rem]">Financial Analyst</p>
@@ -955,7 +955,7 @@
                         <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te11.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te11.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-0 !text-[0.95rem] !leading-[1.5]">Jackie Sanders</h5>
                               <p class="!mb-0 !text-[.85rem]">Investment Planner</p>
@@ -978,7 +978,7 @@
                         <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te12.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te12.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-0 !text-[0.95rem] !leading-[1.5]">Laura Widerski</h5>
                               <p class="!mb-0 !text-[.85rem]">Sales Specialist</p>
@@ -1007,7 +1007,7 @@
     <!-- /section -->
     <section class="wrapper !bg-[#edf2fc]">      
       <div class="container pt-10 pb-20 lg:!py-28 xl:!py-40 xxl:!py-60 !relative">
-        <img class="xl:!absolute lg:!absolute max-lg:static w-full flex-[0_0_auto] max-w-full xl:-translate-y-2/4 lg:-translate-y-2/4 !mb-3 md:!mb-10 lg:!mb-0 xl:!mb-0" src="assets/img/photos/devices2.png" alt="image" style="top: 50%; left: -23%;">
+        <img class="xl:!absolute lg:!absolute max-lg:static w-full flex-[0_0_auto] max-w-full xl:-translate-y-2/4 lg:-translate-y-2/4 !mb-3 md:!mb-10 lg:!mb-0 xl:!mb-0" src="../assets/img/photos/devices2.png" alt="image" style="top: 50%; left: -23%;">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center">
           <div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-6/12 lg:!ml-[50%] xl:w-6/12 xl:!ml-[50%] flex-[0_0_auto]  xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] w-full max-w-full xl:!mt-[-2.25rem] lg:!mt-[-2.25rem] md:!mt-[-2.25rem] text-center xl:text-left lg:text-left">
             <h1 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-bold !text-[#343f52] !tracking-[-0.01rem] !mb-4 md:!px-10 lg:!px-0">Get all of your steps, exercise, sleep and meds in one place.</h1>
@@ -1031,7 +1031,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget">
-            <img class="!mb-4" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block">All rights reserved.</p>
             <nav class="nav social">
               <a class="!text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-[#5daed5] text-[1rem]"></i></a>
@@ -1109,8 +1109,8 @@
       <path class="fill-none stroke-[#54a8c7] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo7.html b/public/html/demo7.html
index e8bcb24..1938817 100644
--- a/public/html/demo7.html
+++ b/public/html/demo7.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
-  <link rel="preload" href="assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
+  <link rel="preload" href="../assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/purple.css">
+  <link rel="stylesheet" href="../assets/css/colors/purple.css">
   <style>
     .swiper-container.nav-color .swiper-button:hover, .swiper-container.nav-color .swiper-slide figure .item-link:hover {
     background: #747ed1 !important;
@@ -44,7 +44,7 @@
           <div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row !flex-nowrap w-full justify-between items-center">
             <div class="navbar-brand w-full">
               <a href='index.html'>
-                <img src="assets/img/truncgil-yatay.svg" alt="image">
+                <img src="../assets/img/truncgil-yatay.svg" alt="image">
               </a>
             </div>
             <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -61,205 +61,205 @@
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo1.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 1</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo2.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 2</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo3.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 3</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo4.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 4</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo5.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 5</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo6.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 6</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo7.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 7</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo8.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 8</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo9.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 9</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo10.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 10</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo11.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 11</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo12.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 12</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo13.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 13</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo14.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 14</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo15.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 15</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo16.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 16</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo17.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 17</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo18.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 18</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo19.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 19</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo20.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 20</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo21.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 21</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo22.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 22</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo23.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 23</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo24.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 24</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo25.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 25</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo26.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 26</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo27.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 27</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo28.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 28</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo29.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 29</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo30.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 30</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo31.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 31</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo32.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 32</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo33.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 33</span>
                             </a>
                           </li>
                           <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                             <a class='dropdown-item' href='demo34.html'>
-                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                              <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                               <span class="xl:!hidden lg:!hidden">Demo 34</span>
                             </a>
                           </li>
@@ -373,87 +373,87 @@
                       <li class="mega-menu-content">
                         <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                               <span>About</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                               <span>Blog</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                               <span>Call to Action</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                               <span>Clients</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                               <span>Contact</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                               <span>Facts</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                               <span>FAQ</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                               <span>Features</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                               <span>Footer</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                               <span>Hero</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                               <span>Misc</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                               <span>Navbar</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                               <span>Portfolio</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                               <span>Pricing</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                               <span>Process</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                               <span>Team</span>
                             </a>
                           </li>
                           <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                              <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                               <span>Testimonials</span>
                             </a>
                           </li>
@@ -594,7 +594,7 @@
         <!-- /div -->
         <div class="flex flex-wrap mx-[-15px] !mt-[3.5rem]" data-cue="fadeIn" data-delay="1600">
           <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="assets/img/illustrations/i12.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="max-w-full h-auto" src="../assets/img/illustrations/i12.png" alt="image"></figure>
           </div>
           <!-- /column -->
         </div>
@@ -611,7 +611,7 @@
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
                 <div class="flex flex-wrap mx-[-15px]">
                   <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
-                    <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/se1.jpg" alt="image"></figure>
+                    <figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../assets/img/photos/se1.jpg" alt="image"></figure>
                   </div>
                   <!-- /column -->
                   <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
@@ -634,7 +634,7 @@
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
                 <div class="flex flex-wrap mx-[-15px]">
                   <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
-                    <figure class="!rounded-[.4rem] !mb-6 xl:!mb-0 lg:!mb-0 md:!mb-0"><img class="!rounded-[.4rem]" src="assets/img/photos/se2.jpg" alt="image"></figure>
+                    <figure class="!rounded-[.4rem] !mb-6 xl:!mb-0 lg:!mb-0 md:!mb-0"><img class="!rounded-[.4rem]" src="../assets/img/photos/se2.jpg" alt="image"></figure>
                   </div>
                   <!-- /column -->
                   <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
@@ -769,27 +769,27 @@
             <div class="swiper overflow-visible">
               <div class="swiper-wrapper">
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp17.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp17.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp18.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project2.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp18.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project2.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp19.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project3.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp19.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project3.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp20.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp20.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp21.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project2.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp21.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project2.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
                 <div class="swiper-slide group">
-                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp22.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project3.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
+                  <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp22.jpg" alt="image"><a class='item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-[ease-in-out] opacity-0 !text-white shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 !bg-[rgba(116,126,209,.9)] group-hover:opacity-100 group-hover:right-4 hover:!bg-[#747ed1]' href='single-project3.html'><i class="uil uil-link before:content-['\ebcd']"></i></a></figure>
                 </div>
                 <!--/.swiper-slide -->
               </div>
@@ -808,7 +808,7 @@
       <div class="container pb-8 xl:pb-10 lg:pb-10">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i9.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i9.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -848,7 +848,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px]  !mb-[5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] ">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i17.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i17.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -913,7 +913,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te1.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te1.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Coriss Ambady</h5>
                         <p class="!mb-0 !text-[.85rem]">Financial Analyst</p>
@@ -933,7 +933,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te2.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te2.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Cory Zamora</h5>
                         <p class="!mb-0 !text-[.85rem]">Marketing Specialist</p>
@@ -953,7 +953,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te3.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te3.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Nikolas Brooten</h5>
                         <p class="!mb-0 !text-[.85rem]">Sales Manager</p>
@@ -973,7 +973,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te4.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te4.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Coriss Ambady</h5>
                         <p class="!mb-0 !text-[.85rem]">Financial Analyst</p>
@@ -993,7 +993,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te5.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te5.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Jackie Sanders</h5>
                         <p class="!mb-0 !text-[.85rem]">Investment Planner</p>
@@ -1013,7 +1013,7 @@
                   <blockquote class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te6.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te6.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5] !tracking-[-0.01rem]">Laura Widerski</h5>
                         <p class="!mb-0 !text-[.85rem]">Sales Specialist</p>
@@ -1147,8 +1147,8 @@
       <path class="fill-none stroke-[#747ed1] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo8.html b/public/html/demo8.html
index ea6b862..dfd2cb1 100644
--- a/public/html/demo8.html
+++ b/public/html/demo8.html
@@ -11,12 +11,12 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
-  <link rel="preload" href="assets/css/fonts/dm.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
+  <link rel="preload" href="../assets/css/fonts/dm.css" as="style" onload="this.rel='stylesheet'">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/aqua.css">  
+  <link rel="stylesheet" href="../assets/css/colors/aqua.css">  
   <style>
         .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
         background: #54a8c7 !important;
@@ -44,7 +44,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -61,205 +61,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -373,87 +373,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -668,7 +668,7 @@
           <div class="card-body xl:!p-[2.5rem] lg:!p-[2.5rem] md:!p-[2.5rem] xl:!py-12 xl:!px-20 p-[40px]">
             <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-[-20px] !mt-[-50px] items-center">
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:!px-[20px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2 flex !relative">
-                <img class="max-w-full h-auto !ml-auto !mx-auto xl:!mr-8 lg:!mr-8" src="assets/img/photos/co3.png" alt="image" data-cue="fadeIn">
+                <img class="max-w-full h-auto !ml-auto !mx-auto xl:!mr-8 lg:!mr-8" src="../assets/img/photos/co3.png" alt="image" data-cue="fadeIn">
                 <div data-cue="slideInRight" data-delay="300">
                   <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !absolute" style="bottom: 10%; right: -3%;">
                     <div class="card-body py-4 px-5">
@@ -713,35 +713,35 @@
           <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] xl:!mt-0 lg:!mt-0 ">
             <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-2.5rem]">
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
-                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="assets/img/brands/c10.png" alt="image"></figure>
+                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="../assets/img/brands/c10.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
-                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="assets/img/brands/c2.png" alt="image"></figure>
+                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="../assets/img/brands/c2.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
-                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="assets/img/brands/c3.png" alt="image"></figure>
+                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="../assets/img/brands/c3.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
-                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="assets/img/brands/c4.png" alt="image"></figure>
+                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="../assets/img/brands/c4.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
-                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="assets/img/brands/c5.png" alt="image"></figure>
+                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="../assets/img/brands/c5.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
-                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="assets/img/brands/c6.png" alt="image"></figure>
+                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="../assets/img/brands/c6.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
-                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="assets/img/brands/c7.png" alt="image"></figure>
+                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="../assets/img/brands/c7.png" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[60px]">
-                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="assets/img/brands/c8.png" alt="image"></figure>
+                <figure class="px-4 lg:!px-3 xxl:!px-5"><img src="../assets/img/brands/c8.png" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -753,7 +753,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] items-center">
           <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full !relative">
             <div class="shape !bg-[#eff7fa] !rounded-[50%] rellax !w-[10rem] !h-[10rem] !absolute z-[1]" data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
-            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="assets/img/photos/about10.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about10.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
@@ -794,7 +794,7 @@
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[10rem] lg:!mb-[10rem] md:!mb-[10rem] items-center">
           <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full !relative lg:!order-2 xl:!order-2">
             <div class="shape !bg-[#eff7fa] !rounded-[50%] rellax !w-[10rem] !h-[10rem] absolute z-[1]" data-rellax-speed="1" style="top: -2rem; right: -1.9rem;"></div>
-            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="assets/img/photos/about11.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about11.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
@@ -858,7 +858,7 @@
         <div class="card !bg-[#eff7fa] !rounded-[0.8rem] !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
           <div class="card-body xl:!p-[2.5rem] lg:!p-[2.5rem] md:!p-[2.5rem] xxl:!py-24 p-[40px] !relative">
             <div class="absolute hidden lg:block xl:block" style="bottom:0; left:10%; width: 28%; z-index:2">
-              <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/co2.png" alt="image"></figure>
+              <figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../assets/img/photos/co2.png" alt="image"></figure>
             </div>
             <div class="flex flex-wrap max-md:mx-[-15px] xl:mx-[-35px] mx-0 !text-center">
               <div class="lg:w-7/12 lg:!ml-[41.66666667%] xl:w-6/12 xl:!ml-[41.66666667%] w-full flex-[0_0_auto] max-md:!px-[15px] xl:!px-[35px] px-0 max-w-full">
@@ -917,7 +917,7 @@
             <div class="!relative">
               <div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block absolute" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
               <div class="card">
-                <figure class="card-img-top"><img class="max-w-full h-auto" src="assets/img/avatars/t1.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img class="max-w-full h-auto" src="../assets/img/avatars/t1.jpg" alt="image"></figure>
                 <div class="card-body px-6 py-5">
                   <h4 class="!mb-1">Coriss Ambady</h4>
                   <p class="!mb-0 text-[.85rem]">Financial Analyst</p>
@@ -933,7 +933,7 @@
             <div class="!relative">
               <div class="shape !rounded-[.4rem] !bg-[#fcf0f1] rellax xl:block lg:block md:block absolute" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
               <div class="card">
-                <figure class="card-img-top"><img class="max-w-full h-auto" src="assets/img/avatars/t2.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img class="max-w-full h-auto" src="../assets/img/avatars/t2.jpg" alt="image"></figure>
                 <div class="card-body px-6 py-5">
                   <h4 class="!mb-1">Cory Zamora</h4>
                   <p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
@@ -949,7 +949,7 @@
             <div class="!relative">
               <div class="shape !rounded-[.4rem] !bg-[#edf9f6] rellax xl:block lg:block md:block absolute" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
               <div class="card">
-                <figure class="card-img-top"><img class="max-w-full h-auto" src="assets/img/avatars/t3.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img class="max-w-full h-auto" src="../assets/img/avatars/t3.jpg" alt="image"></figure>
                 <div class="card-body px-6 py-5">
                   <h4 class="!mb-1">Nikolas Brooten</h4>
                   <p class="!mb-0 text-[.85rem]">Sales Manager</p>
@@ -965,7 +965,7 @@
             <div class="!relative">
               <div class="shape !rounded-[.4rem] !bg-[#f6f3f9] rellax xl:block lg:block md:block absolute" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
               <div class="card">
-                <figure class="card-img-top"><img class="max-w-full h-auto" src="assets/img/avatars/t4.jpg" alt="image"></figure>
+                <figure class="card-img-top"><img class="max-w-full h-auto" src="../assets/img/avatars/t4.jpg" alt="image"></figure>
                 <div class="card-body px-6 py-5">
                   <h4 class="!mb-1">Jackie Sanders</h4>
                   <p class="!mb-0">Investment Planner</p>
@@ -981,9 +981,9 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] items-center !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
           <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !relative !mt-[80px]">
-            <a href="assets/media/movie.mp4" class="btn btn-circle btn-aqua !text-[#343f52] !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:!text-white active:!text-[#343f52] active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#54a8c7] after:!bg-[#54a8c7] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:[animation-delay:.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
+            <a href="../assets/media/movie.mp4" class="btn btn-circle btn-aqua !text-[#343f52] !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:!text-white active:!text-[#343f52] active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#54a8c7] after:!bg-[#54a8c7] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:[animation-delay:.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
             <div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
-            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="assets/img/photos/about12.jpg" alt="image"></figure>
+            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="../assets/img/photos/about12.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="lg:w-5/12 xl:w-4/12 xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !mt-[80px]">
@@ -1234,8 +1234,8 @@
       <path class="fill-none stroke-[#54a8c7] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/demo9.html b/public/html/demo9.html
index e5ceb83..86ad4e1 100644
--- a/public/html/demo9.html
+++ b/public/html/demo9.html
@@ -11,11 +11,11 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>  
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="preload" href="assets/css/fonts/dm.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="preload" href="../assets/css/fonts/dm.css" as="style" onload="this.rel='stylesheet'">
   <style>
    .nav-tabs.nav-tabs-bg .nav-link.active, .nav-tabs.nav-tabs-bg .nav-link:hover {
     box-shadow: 0 0.25rem 1.75rem rgba(30,34,40,.07) !important;
@@ -30,7 +30,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -47,205 +47,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -359,87 +359,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -695,18 +695,18 @@
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
             <div class="flex flex-wrap mx-[-15px]">
               <div class="w-3/12 !ml-[8.33333333%] lg:!ml-0 lg:w-4/12 xl:!ml-0 xl:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full flex flex-col" data-cues="zoomIn" data-group="col-start" data-delay="300">
-                <div class="ml-auto !mt-auto"><img class="!max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="assets/img/photos/sa20.jpg" alt="image"></div>
-                <div class="ml-auto !mt-5 !mb-10"><img class="!max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="assets/img/photos/sa18.jpg" alt="image"></div>
+                <div class="ml-auto !mt-auto"><img class="!max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../assets/img/photos/sa20.jpg" alt="image"></div>
+                <div class="ml-auto !mt-5 !mb-10"><img class="!max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../assets/img/photos/sa18.jpg" alt="image"></div>
               </div>
               <!-- /column -->
               <div class="w-4/12 lg:w-5/12 xl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full" data-cue="zoomIn">
-                <div><img class="w-full max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="assets/img/photos/sa16.jpg" alt="image"></div>
+                <div><img class="w-full max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../assets/img/photos/sa16.jpg" alt="image"></div>
               </div>
               <!-- /column -->
               <div class="w-3/12 flex-[0_0_auto] !px-[15px] max-w-full flex flex-col" data-cues="zoomIn" data-group="col-end" data-delay="300">
-                <div class="!mt-auto"><img class="!max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="assets/img/photos/sa21.jpg" alt="image"></div>
-                <div class="!mt-5"><img class="!max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="assets/img/photos/sa19.jpg" alt="image"></div>
-                <div class="!mt-5 !mb-10"><img class="!max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="assets/img/photos/sa17.jpg" alt="image"></div>
+                <div class="!mt-auto"><img class="!max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../assets/img/photos/sa21.jpg" alt="image"></div>
+                <div class="!mt-5"><img class="!max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../assets/img/photos/sa19.jpg" alt="image"></div>
+                <div class="!mt-5 !mb-10"><img class="!max-w-full h-auto rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../assets/img/photos/sa17.jpg" alt="image"></div>
               </div>
               <!-- /column -->
             </div>
@@ -725,27 +725,27 @@
         <div class="xl:!px-5 lg:!px-5 !mb-[4.5rem] xl:!mb-[9rem] lg:!mb-[9rem] md:!mb-[9rem]">
           <div class="flex flex-wrap mx-0 md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-40px] items-center">
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c1.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c1.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c2.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c2.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c3.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c3.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c4.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c4.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c5.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c5.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c6.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c6.png" alt="image"></figure>
             </div>
             <!--/column -->
           </div>
@@ -795,12 +795,12 @@
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
                 <div class="flex flex-wrap mx-[-12.5px] !mt-[-25px] items-center">
                   <div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !ml-auto" src="assets/img/photos/sa13.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !ml-auto" src="../assets/img/photos/sa13.jpg" alt="image">
                   </div>
                   <!-- /column -->
                   <div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="assets/img/photos/sa14.jpg" alt="image">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="assets/img/photos/sa15.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="../assets/img/photos/sa14.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="../assets/img/photos/sa15.jpg" alt="image">
                   </div>
                   <!-- /column -->
                 </div>
@@ -827,13 +827,13 @@
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] xl:!order-2 lg:!order-2">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-5/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto" src="assets/img/photos/sa9.jpg" alt="image">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" src="assets/img/photos/sa10.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto" src="../assets/img/photos/sa9.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" src="../assets/img/photos/sa10.jpg" alt="image">
                   </div>
                   <!-- /column -->
                   <div class="w-7/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="assets/img/photos/sa11.jpg" alt="image">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" src="assets/img/photos/sa12.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="../assets/img/photos/sa11.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" src="../assets/img/photos/sa12.jpg" alt="image">
                   </div>
                   <!-- /column -->
                 </div>
@@ -860,13 +860,13 @@
               <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="assets/img/photos/sa5.jpg" alt="image">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" src="assets/img/photos/sa6.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="../assets/img/photos/sa5.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" src="../assets/img/photos/sa6.jpg" alt="image">
                   </div>
                   <!-- /column -->
                   <div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5" src="assets/img/photos/sa7.jpg" alt="image">
-                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="assets/img/photos/sa8.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5" src="../assets/img/photos/sa7.jpg" alt="image">
+                    <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="../assets/img/photos/sa8.jpg" alt="image">
                   </div>
                   <!-- /column -->
                 </div>
@@ -913,7 +913,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te1.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te1.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
                         <p class="!mb-0 !text-[.8rem]">Financial Analyst</p>
@@ -933,7 +933,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te2.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te2.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
                         <p class="!mb-0 !text-[.8rem]">Marketing Specialist</p>
@@ -953,7 +953,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te3.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te3.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
                         <p class="!mb-0 !text-[.8rem]">Sales Manager</p>
@@ -973,7 +973,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te4.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te4.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
                         <p class="!mb-0 !text-[.8rem]">Financial Analyst</p>
@@ -993,7 +993,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero a pharetra.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te5.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te5.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Jackie Sanders</h5>
                         <p class="!mb-0 !text-[.8rem]">Investment Planner</p>
@@ -1013,7 +1013,7 @@
                   <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                     <p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.”</p>
                     <div class="flex items-center text-left">
-                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te6.jpg" alt="image">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te6.jpg" alt="image">
                       <div class="info !pl-4">
                         <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Laura Widerski</h5>
                         <p class="!mb-0 !text-[.8rem]">Sales Specialist</p>
@@ -1038,9 +1038,9 @@
       <div class="container py-[4.5rem] xl:!py-28 lg:!py-28 md:!py-28">
         <div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] items-center !mb-[4.5rem] xl:!mb-[9rem] lg:!mb-[9rem] md:!mb-[9rem]">
           <div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[7.5px] lg:!px-[7.5px] !mt-[80px] max-w-full !relative">
-            <a href="assets/media/movie.mp4" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#3f78e0] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#3f78e0] after:[animation-delay:.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
+            <a href="../assets/media/movie.mp4" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-play ripple !mx-auto !mb-5 !absolute xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#3f78e0] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#3f78e0] after:[animation-delay:.5s]" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
             <div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
-            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="assets/img/photos/about8.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about8.jpg" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="lg:w-5/12 xl:w-4/12 xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] xl:!px-[7.5px] lg:!px-[7.5px] !mt-[80px] max-w-full">
@@ -1238,7 +1238,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1316,8 +1316,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/index.html b/public/html/index.html
index d088a7d..210cc4f 100644
--- a/public/html/index.html
+++ b/public/html/index.html
@@ -13,12 +13,12 @@
     content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-  <link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+  <link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="assets/css/colors/grape.css">
-  <link rel="preload" href="assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
+  <link rel="stylesheet" href="../assets/css/colors/grape.css">
+  <link rel="preload" href="../assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
   <style>
     .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
       background: #e31e24 !important;
@@ -50,7 +50,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -72,7 +72,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi1.jpg" alt="image">
+                                src="../assets/img/demos/mi1.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
@@ -80,7 +80,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi2.jpg" alt="image">
+                                src="../assets/img/demos/mi2.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
@@ -88,7 +88,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi3.jpg" alt="image">
+                                src="../assets/img/demos/mi3.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
@@ -96,7 +96,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi4.jpg" alt="image">
+                                src="../assets/img/demos/mi4.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
@@ -104,7 +104,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi5.jpg" alt="image">
+                                src="../assets/img/demos/mi5.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
@@ -112,7 +112,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi6.jpg" alt="image">
+                                src="../assets/img/demos/mi6.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
@@ -120,7 +120,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi7.jpg" alt="image">
+                                src="../assets/img/demos/mi7.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
@@ -128,7 +128,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi8.jpg" alt="image">
+                                src="../assets/img/demos/mi8.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
@@ -136,7 +136,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi9.jpg" alt="image">
+                                src="../assets/img/demos/mi9.jpg" alt="image">
                             </figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
@@ -144,7 +144,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi10.jpg"
+                                src="../assets/img/demos/mi10.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
@@ -152,7 +152,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi11.jpg"
+                                src="../assets/img/demos/mi11.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
@@ -160,7 +160,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi12.jpg"
+                                src="../assets/img/demos/mi12.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
@@ -168,7 +168,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi13.jpg"
+                                src="../assets/img/demos/mi13.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
@@ -176,7 +176,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi14.jpg"
+                                src="../assets/img/demos/mi14.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
@@ -184,7 +184,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi15.jpg"
+                                src="../assets/img/demos/mi15.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
@@ -192,7 +192,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi16.jpg"
+                                src="../assets/img/demos/mi16.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
@@ -200,7 +200,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi17.jpg"
+                                src="../assets/img/demos/mi17.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
@@ -208,7 +208,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi18.jpg"
+                                src="../assets/img/demos/mi18.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
@@ -216,7 +216,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi19.jpg"
+                                src="../assets/img/demos/mi19.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
@@ -224,7 +224,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi20.jpg"
+                                src="../assets/img/demos/mi20.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
@@ -232,7 +232,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi21.jpg"
+                                src="../assets/img/demos/mi21.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
@@ -240,7 +240,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi22.jpg"
+                                src="../assets/img/demos/mi22.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
@@ -248,7 +248,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi23.jpg"
+                                src="../assets/img/demos/mi23.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
@@ -256,7 +256,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi24.jpg"
+                                src="../assets/img/demos/mi24.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
@@ -264,7 +264,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi25.jpg"
+                                src="../assets/img/demos/mi25.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
@@ -272,7 +272,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi26.jpg"
+                                src="../assets/img/demos/mi26.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
@@ -280,7 +280,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi27.jpg"
+                                src="../assets/img/demos/mi27.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
@@ -288,7 +288,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi28.jpg"
+                                src="../assets/img/demos/mi28.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
@@ -296,7 +296,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi29.jpg"
+                                src="../assets/img/demos/mi29.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
@@ -304,7 +304,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi30.jpg"
+                                src="../assets/img/demos/mi30.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
@@ -312,7 +312,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi31.jpg"
+                                src="../assets/img/demos/mi31.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
@@ -320,7 +320,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi32.jpg"
+                                src="../assets/img/demos/mi32.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
@@ -328,7 +328,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi33.jpg"
+                                src="../assets/img/demos/mi33.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
@@ -336,7 +336,7 @@
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
                             <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
-                                src="assets/img/demos/mi34.jpg"
+                                src="../assets/img/demos/mi34.jpg"
                                 alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
@@ -497,103 +497,103 @@
                         class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
                             <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
-                                class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                                class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -729,19 +729,19 @@
       <div
         class="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] pb-24 xl:pb-32 lg:pb-32 md:pb-32 !text-center !relative">
         <div class="absolute" style="top: -12%; left: 50%; transform: translateX(-50%);" data-cue="fadeIn"><img
-            src="assets/img/photos/blurry.png" alt="image"></div>
+            src="../assets/img/photos/blurry.png" alt="image"></div>
         <div class="flex flex-wrap mx-[-15px] !relative">
           <div class="lg:w-8/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
             <div class="absolute shape grape w-5 hidden xl:block lg:block" style="top: -5%; left: -15%;"
               data-cue="fadeIn" data-delay="1500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219.5 219.5"
-                data-inject-url="assets/img/svg/pie.svg"
+                data-inject-url="../assets/img/svg/pie.svg"
                 class="svg-inject icon-svg !w-full !h-full">
                 <path class="svg-fill"
                   d="M219.5 219.5H0c0-58.19 23.14-114.06 64.29-155.21A219.561 219.561 0 01219.5 0v219.5z"></path>
               </svg></div>
             <div class="absolute shape violet !w-[2.5rem] hidden xl:block lg:block" style="bottom: 30%; left: -20%;"
               data-cue="fadeIn" data-delay="1500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457.71 446.45"
-                data-inject-url="assets/img/svg/scribble.svg"
+                data-inject-url="../assets/img/svg/scribble.svg"
                 class="svg-inject icon-svg !w-full !h-full">
                 <path class="svg-fill"
                   d="M205.62 442.54c-.51-.41-.99-.84-1.46-1.31-10.4-10.39-3.61-27.12 11.63-52.5 11.72-19.51 28.48-43.74 46.22-69.39 17.53-25.34 35.66-51.54 49.01-73.47 14.73-24.19 18.57-35.01 19.51-39.48-3.86-.28-13.15.3-33.78 6.52-19.71 5.94-43.09 14.92-65.7 23.6-63.8 24.49-85.35 31.41-96.51 19.5-3.21-3.43-7.62-11.04-1.12-23.54 2.49-4.79 6.64-10.51 12.68-17.5 10.4-12.03 25.04-26.34 40.55-41.49 14.02-13.7 28.53-27.87 39.53-40.11 9.93-11.04 14.15-17.43 15.94-20.82-3.43-.75-10.24-1.51-23.25-.92-14.99.68-33.44 2.89-51.28 5.02-46.92 5.61-74.09 8.33-86.81-.99-4.78-3.5-7.67-8.42-8.41-14.24-1.97-15.58 12.45-33.15 29.14-53.5 5.31-6.47 13.31-16.22 17.36-22.68-4.51-.38-12.43-.4-25.97 1.1-16.54 1.82-35.62 5.22-50.95 7.96-12.62 2.25-22.6 4.03-28.48 4.49C6.6 39.3.58 34.17.04 27.28c-.54-6.88 4.6-12.9 11.48-13.44 4.66-.37 14.58-2.13 26.06-4.18C54.56 6.63 75.7 2.86 94 1.07c26.41-2.6 40.16-.54 47.48 7.13 7.01 7.34 6.45 17.66-1.68 30.66-4.72 7.55-11.63 15.98-18.95 24.9-6.18 7.53-12.57 15.31-17.24 22.19-3.35 4.92-4.95 8.13-5.71 10.07 3 .54 9.09 1.08 20.87.43 13.21-.73 29.07-2.63 45.86-4.64 59.99-7.17 94.33-10.22 102.49 10.62 7.4 18.93-16.51 43.51-62.99 88.92-12.69 12.4-24.68 24.11-34.04 34.28-3.17 3.45-5.68 6.34-7.67 8.75 15.88-4.42 41.18-14.13 59.67-21.22 62.4-23.96 101.69-37.87 121.09-29.14 5.38 2.42 9.26 6.47 11.23 11.72 7.48 19.95-16.15 57.31-71.83 137.82-15.49 22.39-30.12 43.55-41.18 61.25-7.13 11.4-11.3 19.11-13.75 24.25 8.97-3.3 25.58-11 55.73-28.8 32.68-19.29 70.61-44.04 101.09-63.94 24.62-16.07 44.07-28.76 54.65-34.68 6.03-3.37 13.64-1.22 17.01 4.81 3.37 6.03 1.22 13.64-4.81 17.01-9.83 5.5-29.92 18.61-53.18 33.79-33.46 21.84-75.1 49.01-110.05 69.21-49.35 28.51-70.85 35.44-82.46 26.07z">
@@ -750,7 +750,7 @@
             <div class="absolute shape fuchsia w-6 hidden xl:block lg:block"
               style="top: 0%; right: -25%; transform: rotate(70deg);" data-cue="fadeIn" data-delay="1500"><svg
                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 411.42 329.24"
-                data-inject-url="assets/img/svg/tri.svg"
+                data-inject-url="../assets/img/svg/tri.svg"
                 class="svg-inject icon-svg !w-full !h-full">
                 <g data-name="Layer 2">
                   <path class="svg-fill"
@@ -760,7 +760,7 @@
               </svg></div>
             <div class="absolute shape yellow w-6 hidden xl:block lg:block" style="bottom: 25%; right: -17%;"
               data-cue="fadeIn" data-delay="1500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"
-                data-inject-url="assets/img/svg/circle.svg"
+                data-inject-url="../assets/img/svg/circle.svg"
                 class="svg-inject icon-svg !w-full !h-full">
                 <g data-name="Layer 2">
                   <path class="svg-fill"
@@ -801,49 +801,49 @@
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma8.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma8.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma9.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma9.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma10.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma10.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma11.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma11.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma12.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma12.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma13.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma13.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma14.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma14.jpg"
  alt="" />
               </figure>
             </div>
@@ -861,49 +861,49 @@
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma1.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma1.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma2.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma2.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma3.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma3.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma4.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma4.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma5.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma5.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma6.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma6.jpg"
  alt="" />
               </figure>
             </div>
             <div class="swiper-slide">
               <figure
                 class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                <img class="!rounded-[.8rem]" src="assets/img/photos/ma7.jpg"
+                <img class="!rounded-[.8rem]" src="../assets/img/photos/ma7.jpg"
  alt="" />
               </figure>
             </div>
@@ -938,7 +938,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo18.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d18.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d18.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo18.html'>Layout 18</a></h2>
             </div>
             <!-- /column -->
@@ -946,7 +946,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo19.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d19.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d19.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo19.html'>Layout 19</a></h2>
             </div>
             <!-- /column -->
@@ -954,7 +954,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo20.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d20.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d20.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo20.html'>Layout 20</a></h2>
             </div>
             <!-- /column -->
@@ -962,7 +962,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo21.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d21.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d21.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo21.html'>Layout 21</a></h2>
             </div>
             <!-- /column -->
@@ -970,7 +970,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo22.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d22.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d22.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo22.html'>Layout 22</a></h2>
             </div>
             <!-- /column -->
@@ -978,7 +978,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo23.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d23.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d23.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo23.html'>Layout 23</a></h2>
             </div>
             <!-- /column -->
@@ -986,7 +986,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo24.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d24.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d24.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo24.html'>Layout 24</a></h2>
             </div>
             <!-- /column -->
@@ -994,7 +994,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo25.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d25.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d25.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo25.html'>Layout 25</a></h2>
             </div>
             <!-- /column -->
@@ -1002,7 +1002,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo26.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d26.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d26.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo26.html'>Layout 26</a></h2>
             </div>
             <!-- /column -->
@@ -1010,7 +1010,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo27.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d27.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d27.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo27.html'>Layout 27</a></h2>
             </div>
             <!-- /column -->
@@ -1018,7 +1018,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo28.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d28.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d28.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo28.html'>Layout 28</a></h2>
             </div>
             <!-- /column -->
@@ -1026,7 +1026,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo29.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d29.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d29.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo29.html'>Layout 29</a></h2>
             </div>
             <!-- /column -->
@@ -1034,7 +1034,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo30.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d30.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d30.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo30.html'>Layout 30</a></h2>
             </div>
             <!-- /column -->
@@ -1042,7 +1042,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo31.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d31.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d31.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo31.html'>Layout 31</a></h2>
             </div>
             <!-- /column -->
@@ -1050,7 +1050,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo32.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d32.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d32.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo32.html'>Layout 32</a></h2>
             </div>
             <!-- /column -->
@@ -1058,7 +1058,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo33.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d33.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d33.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo33.html'>Layout 33</a></h2>
             </div>
             <!-- /column -->
@@ -1066,14 +1066,14 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo34.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d34.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d34.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo34.html'>Layout 34</a></h2>
             </div>
             <!-- /column -->
             <div
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px] hidden xl:!flex lg:!flex md:!flex items-center justify-center flex-col">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 245.36"
-                data-inject-url="assets/img/icons/solid/layers.svg"
+                data-inject-url="../assets/img/icons/solid/layers.svg"
                 class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-duo text-grape-fuchsia xl:!mt-[-2.5rem] lg:!mt-[-2.5rem] md:!mt-[-2.5rem] mb-4">
                 <path class="fill-primary"
                   d="M128 117.36a7.92 7.92 0 01-3.1-.63L4.9 66.06a8 8 0 010-14.75L124.9.64a7.9 7.9 0 016.22 0l120 50.67a8 8 0 010 14.75l-120 50.67a7.92 7.92 0 01-3.12.63zm123.1 19.29l-12.49-5.28-101.28 42.75a24 24 0 01-18.69 0L17.39 131.36l-12.51 5.28a8 8 0 000 14.75l120 50.67a8.06 8.06 0 006.2 0l120-50.67a8 8 0 000-14.74z">
@@ -1098,7 +1098,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo1.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d1.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d1.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo1.html'>Layout 1</a></h2>
             </div>
             <!-- /column -->
@@ -1106,7 +1106,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo2.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d2.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d2.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo2.html'>Layout 2</a></h2>
             </div>
             <!-- /column -->
@@ -1114,7 +1114,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo3.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d3.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d3.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo3.html'>Layout 3</a></h2>
             </div>
             <!-- /column -->
@@ -1122,7 +1122,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo4.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d4.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d4.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo4.html'>Layout 4</a></h2>
             </div>
             <!-- /column -->
@@ -1130,7 +1130,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo5.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d5.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d5.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo5.html'>Layout 5</a></h2>
             </div>
             <!-- /column -->
@@ -1138,7 +1138,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo6.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d6.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d6.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo6.html'>Layout 6</a></h2>
             </div>
             <!-- /column -->
@@ -1146,7 +1146,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo7.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d7.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d7.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo7.html'>Layout 7</a></h2>
             </div>
             <!-- /column -->
@@ -1154,7 +1154,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo8.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d8.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d8.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo8.html'>Layout 8</a></h2>
             </div>
             <!-- /column -->
@@ -1162,7 +1162,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo9.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d9.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d9.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo9.html'>Layout 9</a></h2>
             </div>
             <!-- /column -->
@@ -1170,7 +1170,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo10.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d10.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d10.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo10.html'>Layout 10</a></h2>
             </div>
             <!-- /column -->
@@ -1178,7 +1178,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo11.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d11.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d11.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo11.html'>Layout 11</a></h2>
             </div>
             <!-- /column -->
@@ -1186,7 +1186,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo12.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d12.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d12.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo12.html'>Layout 12</a></h2>
             </div>
             <!-- /column -->
@@ -1194,7 +1194,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo13.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d13.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d13.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo13.html'>Layout 13</a></h2>
             </div>
             <!-- /column -->
@@ -1202,7 +1202,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo14.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d14.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d14.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo14.html'>Layout 14</a></h2>
             </div>
             <!-- /column -->
@@ -1210,7 +1210,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo15.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d15.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d15.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo15.html'>Layout 15</a></h2>
             </div>
             <!-- /column -->
@@ -1218,7 +1218,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo16.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d16.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d16.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo16.html'>Layout 16</a></h2>
             </div>
             <!-- /column -->
@@ -1226,7 +1226,7 @@
               class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
               <figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo17.html' target='_blank'><img
                     class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
-                    src="assets/img/demos/d17.jpg" alt="image"></a></figure>
+                    src="../assets/img/demos/d17.jpg" alt="image"></a></figure>
               <h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo17.html'>Layout 17</a></h2>
             </div>
             <!-- /column -->
@@ -1279,8 +1279,8 @@
             class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full !relative">
             <div class="absolute"
               style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:0"><img
-                class="w-full" src="assets/img/photos/blurry.png" alt="image"></div>
-            <figure class="!relative" style="z-index: 2;"><img src="assets/img/photos/mi1.png"
+                class="w-full" src="../assets/img/photos/blurry.png" alt="image"></div>
+            <figure class="!relative" style="z-index: 2;"><img src="../assets/img/photos/mi1.png"
  alt="image"></figure>
           </div>
           <!--/column -->
@@ -1291,7 +1291,7 @@
                 <div
                   class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.97 256"
-                    data-inject-url="assets/img/icons/solid/puzzle.svg"
+                    data-inject-url="../assets/img/icons/solid/puzzle.svg"
                     class="svg-inject icon-svg solid-duo text-grape-fuchsia">
                     <path class="fill-secondary"
                       d="M221.86 91a33.65 33.65 0 01-22.72-8.75v40.21h-27.2a43.26 43.26 0 003.73-17.71 44.8 44.8 0 10-86 17.71H56.85v-111A11.42 11.42 0 0168.26 0h119.47a11.42 11.42 0 0111.41 11.41v20.05A34.1 34.1 0 11221.86 91z">
@@ -1312,7 +1312,7 @@
                 <div
                   class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
-                    data-inject-url="assets/img/icons/solid/pen-tool.svg"
+                    data-inject-url="../assets/img/icons/solid/pen-tool.svg"
                     class="svg-inject icon-svg solid-duo text-grape-fuchsia">
                     <g data-name="Layer 2">
                       <path class="fill-primary"
@@ -1335,7 +1335,7 @@
                 <div
                   class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.98 245.34"
-                    data-inject-url="assets/img/icons/solid/share.svg"
+                    data-inject-url="../assets/img/icons/solid/share.svg"
                     class="svg-inject icon-svg solid-duo text-grape-fuchsia">
                     <g data-name="Layer 2">
                       <path class="fill-secondary"
@@ -1362,8 +1362,8 @@
             class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full !relative xl:!order-2 lg:!order-2">
             <div class="absolute"
               style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:0"><img
-                class="w-full" src="assets/img/photos/blurry.png" alt="image"></div>
-            <figure class="!relative" style="z-index: 2;"><img src="assets/img/photos/mi2.png"
+                class="w-full" src="../assets/img/photos/blurry.png" alt="image"></div>
+            <figure class="!relative" style="z-index: 2;"><img src="../assets/img/photos/mi2.png"
  alt="image"></figure>
           </div>
           <!--/column -->
@@ -1374,7 +1374,7 @@
                 <div
                   class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
-                    data-inject-url="assets/img/icons/solid/devices.svg"
+                    data-inject-url="../assets/img/icons/solid/devices.svg"
                     class="svg-inject icon-svg solid-duo text-grape-fuchsia">
                     <path class="fill-primary"
                       d="M226.67 0H80a29.35 29.35 0 00-29.33 29.33v13.33H72v-8a13.34 13.34 0 0113.33-13.33h136a13.34 13.34 0 0113.33 13.33v186.67a13.35 13.35 0 01-13.33 13.33h-82.74A44.07 44.07 0 01132.7 256h94a29.33 29.33 0 0029.3-29.33V29.33A29.35 29.35 0 00226.67 0z">
@@ -1397,7 +1397,7 @@
                 <div
                   class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
-                    data-inject-url="assets/img/icons/solid/safe.svg"
+                    data-inject-url="../assets/img/icons/solid/safe.svg"
                     class="svg-inject icon-svg solid-duo text-grape-fuchsia">
                     <g data-name="Layer 2">
                       <path class="fill-secondary"
@@ -1421,7 +1421,7 @@
                 <div
                   class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.01 256"
-                    data-inject-url="assets/img/icons/solid/globe-2.svg"
+                    data-inject-url="../assets/img/icons/solid/globe-2.svg"
                     class="svg-inject icon-svg solid-duo text-grape-fuchsia">
                     <path class="fill-secondary"
                       d="M128.11 256h-.24a126.37 126.37 0 01-22-1.84 8 8 0 112.72-15.76A114.68 114.68 0 00128 240a8.06 8.06 0 018.07 8 8 8 0 01-7.94 8zm33.52-12.5a8 8 0 014.77-10.25 112.18 112.18 0 0017.66-8.25 8 8 0 018 13.85 128.36 128.36 0 01-20.19 9.46 8 8 0 01-10.26-4.79zm-97.5-4.56a128.83 128.83 0 01-18.27-12.78 8 8 0 1110.25-12.27 114.33 114.33 0 0016 11.2 8 8 0 11-8 13.85zm150.69-27.71a8 8 0 01-1-11.26A112.91 112.91 0 00225 184a8 8 0 0113.86 8 130.3 130.3 0 01-12.78 18.26 8 8 0 01-11.28 1zm-197.59-19A128.41 128.41 0 017.76 172a8 8 0 1115-5.49 112.8 112.8 0 008.29 17.67 8 8 0 11-13.84 8zM244.8 156.7a8 8 0 01-6.5-9.26A112.3 112.3 0 00240 128a8.23 8.23 0 018-8.26 7.81 7.81 0 018 8.76 124.89 124.89 0 01-1.92 21.72 8 8 0 01-9.26 6.48zM8 136.13a7.89 7.89 0 01-8-7.87s.61-15 1.86-22.18a8 8 0 1115.76 2.7A114.47 114.47 0 0016 128a8.09 8.09 0 01-8 8.13zm225.1-46.88a110.41 110.41 0 00-8.32-17.63 8 8 0 0113.83-8.08 129 129 0 019.52 20.17 8 8 0 01-15 5.54zM19.9 75.18A8 8 0 0117 64.26 126.41 126.41 0 0129.73 46 8 8 0 1142 56.21a112.72 112.72 0 00-11.17 16 8 8 0 01-10.93 3zm179.76-33.24a113.17 113.17 0 00-16-11.16 8 8 0 117.95-13.87 127.39 127.39 0 0118.3 12.75 8 8 0 01-10.24 12.28zM60.78 28.26a8 8 0 012.88-11 128 128 0 0120.18-9.44 8 8 0 115.52 15 112.17 112.17 0 00-17.63 8.31 8 8 0 01-11-2.88zm86.29-10.64A112.4 112.4 0 00128 16a8.17 8.17 0 01-8.19-8 7.84 7.84 0 017.81-8h.38a127.72 127.72 0 0121.8 1.86 8 8 0 01-2.71 15.76z">
@@ -1462,7 +1462,7 @@
               <div class="swiper-slide">
                 <figure
                   class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                  <img class="!rounded-[.8rem]" src="assets/img/photos/bp1.jpg"
+                  <img class="!rounded-[.8rem]" src="../assets/img/photos/bp1.jpg"
  alt="" />
                 </figure>
               </div>
@@ -1470,7 +1470,7 @@
               <div class="swiper-slide">
                 <figure
                   class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                  <img class="!rounded-[.8rem]" src="assets/img/photos/bp2.jpg"
+                  <img class="!rounded-[.8rem]" src="../assets/img/photos/bp2.jpg"
  alt="" />
                 </figure>
               </div>
@@ -1478,7 +1478,7 @@
               <div class="swiper-slide">
                 <figure
                   class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                  <img class="!rounded-[.8rem]" src="assets/img/photos/bp3.jpg"
+                  <img class="!rounded-[.8rem]" src="../assets/img/photos/bp3.jpg"
  alt="" />
                 </figure>
               </div>
@@ -1486,7 +1486,7 @@
               <div class="swiper-slide">
                 <figure
                   class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                  <img class="!rounded-[.8rem]" src="assets/img/photos/bp4.jpg"
+                  <img class="!rounded-[.8rem]" src="../assets/img/photos/bp4.jpg"
  alt="" />
                 </figure>
               </div>
@@ -1494,7 +1494,7 @@
               <div class="swiper-slide">
                 <figure
                   class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                  <img class="!rounded-[.8rem]" src="assets/img/photos/bp5.jpg"
+                  <img class="!rounded-[.8rem]" src="../assets/img/photos/bp5.jpg"
  alt="" />
                 </figure>
               </div>
@@ -1502,7 +1502,7 @@
               <div class="swiper-slide">
                 <figure
                   class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
-                  <img class="!rounded-[.8rem]" src="assets/img/photos/bp6.jpg"
+                  <img class="!rounded-[.8rem]" src="../assets/img/photos/bp6.jpg"
  alt="" />
                 </figure>
               </div>
@@ -1520,70 +1520,70 @@
           class="flex flex-wrap mx-[-15px] row-cols-2 row-cols-md-4 row-cols-lg-5 xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] !text-center justify-center pb-24 xl:pb-32 lg:pb-32 md:pb-32">
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi1.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi1.png"
               alt="image">
             <h4>Built with <br> tailwindcss</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi2.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi2.png"
               alt="image">
             <h4>SEO-friendly <br> Coding</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi3.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi3.png"
               alt="image">
             <h4>Valid W3C <br> HTML5 & CSS3</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi4.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi4.png"
               alt="image">
             <h4>Retina-ready <br> Graphics</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi5.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi5.png"
               alt="image">
             <h4>One-page <br> Layout Option</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi6.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi6.png"
               alt="image">
             <h4>Isotope <br> Filterable Gallery</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi7.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi7.png"
               alt="image">
             <h4>Mailchimp <br> Compatible </h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi8.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi8.png"
               alt="image">
             <h4>Contact Form <br> w/o Page Refresh</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi9.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi9.png"
               alt="image">
             <h4>Animations <br> on Page Scroll</h4>
           </div>
           <!--/column -->
           <div
             class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
-            <img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi10.png"
+            <img class="!mb-4 m-[0_auto]" src="../assets/img/demos/fi10.png"
               alt="image">
             <h4>Top-Notch Support <br> & Free Updates</h4>
           </div>
@@ -1595,7 +1595,7 @@
             class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full !relative">
             <div class="absolute"
               style="top: 50%; left: 50%; width: 130%; height: auto; transform: translate(-50%,-50%); z-index:0"><img
-                class="w-full" src="assets/img/photos/blurry.png" alt="image"></div>
+                class="w-full" src="../assets/img/photos/blurry.png" alt="image"></div>
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div
                 class="md:w-6/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
@@ -1706,11 +1706,11 @@
     <section class="wrapper overflow-hidden">
       <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 !text-center !relative">
         <div class="absolute" style="top: -7%; left: 50%; transform: translateX(-50%);"><img
-            src="assets/img/photos/blurry.png" alt="image"></div>
+            src="../assets/img/photos/blurry.png" alt="image"></div>
         <div class="flex flex-wrap mx-[-15px] !relative !mb-9 xl:!mb-12 lg:!mb-12 md:!mb-12">
           <div class="lg:w-10/12 xl:w-9/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
             <div>
-              <img class="m-[0_auto]" src="assets/img/demos/icon-grape.png"
+              <img class="m-[0_auto]" src="../assets/img/demos/icon-grape.png"
  alt="image">
               <h1 class="font-semibold !leading-[1.15] xl:!text-[3.2rem] !text-[calc(1.445rem_+_2.34vw)] !mt-5 !mb-5">
                 Think
@@ -1732,7 +1732,7 @@
       </div>
       <!-- /.container -->
       <div class="container !text-center">
-        <img class="max-w-full h-auto !relative m-[0_auto]" style="z-index: 2;" src="assets/img/demos/f1.png"
+        <img class="max-w-full h-auto !relative m-[0_auto]" style="z-index: 2;" src="../assets/img/demos/f1.png"
  alt="image">
       </div>
     </section>
@@ -1747,8 +1747,8 @@
         d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/onepage.html b/public/html/onepage.html
index 93dc947..fdfeb68 100644
--- a/public/html/onepage.html
+++ b/public/html/onepage.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -100,7 +100,7 @@
           <!-- /.row -->
           <div class="flex flex-wrap mx-[-15px] !text-center !mt-10">
             <div class="md:w-10/12 xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[8.33333333%]">
-              <figure class="m-0 p-0"><img class="w-auto m-[0_auto]" src="assets/img/illustrations/i8.png" alt="image"></figure>
+              <figure class="m-0 p-0"><img class="w-auto m-[0_auto]" src="../assets/img/illustrations/i8.png" alt="image"></figure>
             </div>
             <!-- /column -->
           </div>
@@ -182,7 +182,7 @@
         <div class="container py-[4.5rem] xl:!py-28 lg:!py-28 md:!py-28">
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-24 lg:!mb-24 md:!mb-24 items-center">
             <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-              <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i3.png" alt="image"></figure>
+              <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i3.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -221,7 +221,7 @@
           <!--/.row -->
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
             <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
-              <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i2.png" alt="image"></figure>
+              <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i2.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -298,7 +298,7 @@
                 <div class="swiper">
                   <div class="swiper-wrapper">
                     <div class="swiper-slide">
-                      <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t1.jpg" alt="image">
+                      <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t1.jpg" alt="image">
                       <h4 class="!mb-1">Cory Zamora</h4>
                       <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Marketing Specialist</div>
                       <p class="!mb-2">Etiam porta sem magna malesuada mollis.</p>
@@ -311,7 +311,7 @@
                     </div>
                     <!--/.swiper-slide -->
                     <div class="swiper-slide">
-                      <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t2.jpg" alt="image">
+                      <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t2.jpg" alt="image">
                       <h4 class="!mb-1">Coriss Ambady</h4>
                       <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Financial Analyst</div>
                       <p class="!mb-2">Aenean eu leo quam. Pellentesque ornare lacinia.</p>
@@ -324,7 +324,7 @@
                     </div>
                     <!--/.swiper-slide -->
                     <div class="swiper-slide">
-                      <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t3.jpg" alt="image">
+                      <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t3.jpg" alt="image">
                       <h4 class="!mb-1">Nikolas Brooten</h4>
                       <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Sales Manager</div>
                       <p class="!mb-2">Donec ornare elit quam porta gravida at eget.</p>
@@ -337,7 +337,7 @@
                     </div>
                     <!--/.swiper-slide -->
                     <div class="swiper-slide">
-                      <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t4.jpg" alt="image">
+                      <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t4.jpg" alt="image">
                       <h4 class="!mb-1">Jackie Sanders</h4>
                       <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Investment Planner</div>
                       <p class="!mb-2">Nullam risus eget urna mollis ornare vel eu leo.</p>
@@ -350,7 +350,7 @@
                     </div>
                     <!--/.swiper-slide -->
                     <div class="swiper-slide">
-                      <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t5.jpg" alt="image">
+                      <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="../assets/img/avatars/t5.jpg" alt="image">
                       <h4 class="!mb-1">Tina Geller</h4>
                       <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Assistant Buyer</div>
                       <p class="!mb-2">Vivamus sagittis lacus vel augue laoreet rutrum.</p>
@@ -383,7 +383,7 @@
         <div class="container py-[4.5rem] xl:!py-28 lg:!py-28 md:!py-28">
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] !mb-20 items-center">
             <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[70px] max-w-full xl:!order-2 lg:!order-2">
-              <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i4.png" alt="image"></figure>
+              <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i4.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[70px] max-w-full xl:!mt-[4.5rem] lg:!mt-[4.5rem]">
@@ -439,27 +439,27 @@
         <div class="xl:!px-5 lg:!px-5">
           <div class="flex flex-wrap mx-0 md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-40px] items-center">
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c1.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c1.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c2.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c2.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c3.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c3.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c4.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c4.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c5.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c5.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
-              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c6.png" alt="image"></figure>
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c6.png" alt="image"></figure>
             </div>
             <!--/column -->
           </div>
@@ -477,7 +477,7 @@
         <div class="container py-[4.5rem] xl:!py-28 lg:!py-28 md:!py-28">
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
             <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-              <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i5.png" alt="image"></figure>
+              <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i5.png" alt="image"></figure>
             </div>
             <!--/column -->
             <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -527,7 +527,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -604,8 +604,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/page-loader.html b/public/html/page-loader.html
index fc2ab01..f7b1267 100644
--- a/public/html/page-loader.html
+++ b/public/html/page-loader.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -576,10 +576,10 @@
       <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
         <div class="flex flex-wrap mx-[-15px] !mb-8">
           <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[-10rem]">
-            <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/about5.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about5.jpg" alt="image"></figure>
             <div class="flex flex-wrap mx-[-15px]">
               <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-                <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0  xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="assets/img/photos/bg3.jpg">
+                <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0  xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="../assets/img/photos/bg3.jpg">
                   <div class="card-body p-[2.25rem] xl:!p-[2.5rem]">
                     <div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-20px] !text-center">
                       <div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
@@ -620,19 +620,19 @@
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[20px] !mt-[40px] max-w-full xl:!order-2 lg:!order-2">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[16.66666667%] !self-end">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g1.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g1.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full !self-end">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g2.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g2.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g3.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g3.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full !self-start">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g4.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g4.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -726,7 +726,7 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-    <section class="wrapper image-wrapper bg-image bg-overlay bg-no-repeat bg-[center_center] bg-cover !relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="assets/img/photos/bg1.jpg">
+    <section class="wrapper image-wrapper bg-image bg-overlay bg-no-repeat bg-[center_center] bg-cover !relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="../assets/img/photos/bg1.jpg">
       <div class="container py-[8rem] !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="lg:w-10/12 xl:w-10/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -820,13 +820,13 @@
             <div class="shape bg-dot primary rellax !w-[8rem] !h-[8rem] bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: 0; left: -1.4rem; z-index: 0;"></div>
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
-                <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="assets/img/photos/g5.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="../assets/img/photos/g5.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
-                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g6.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g6.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                   <div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
@@ -868,7 +868,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -945,8 +945,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/pricing.html b/public/html/pricing.html
index 822c77e..a542b30 100644
--- a/public/html/pricing.html
+++ b/public/html/pricing.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -848,7 +848,7 @@
                         <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te1.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te1.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
                               <p class="!mb-0 text-[.8rem]">Financial Analyst</p>
@@ -870,7 +870,7 @@
                         <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te2.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te2.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Cory Zamora</h5>
                               <p class="!mb-0 text-[.8rem]">Marketing Specialist</p>
@@ -892,7 +892,7 @@
                         <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te3.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te3.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Nikolas Brooten</h5>
                               <p class="!mb-0 text-[.8rem]">Sales Manager</p>
@@ -914,7 +914,7 @@
                         <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te4.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te4.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
                               <p class="!mb-0 text-[.8rem]">Financial Analyst</p>
@@ -936,7 +936,7 @@
                         <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te5.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te5.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Jackie Sanders</h5>
                               <p class="!mb-0 text-[.8rem]">Investment Planner</p>
@@ -958,7 +958,7 @@
                         <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
                           <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
                           <div class="flex items-center text-left">
-                            <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te6.jpg" alt="image">
+                            <img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te6.jpg" alt="image">
                             <div class="info !pl-4">
                               <h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Laura Widerski</h5>
                               <p class="!mb-0 text-[.8rem]">Sales Specialist</p>
@@ -985,7 +985,7 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-    <section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center !mb-[4.5rem] xl:!mb-24 lg:!mb-24 md:!mb-24 bg-map relative z-0 bg-[center_center] bg-no-repeat !bg-scroll" data-image-src="assets/img/map.png">
+    <section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center !mb-[4.5rem] xl:!mb-24 lg:!mb-24 md:!mb-24 bg-map relative z-0 bg-[center_center] bg-no-repeat !bg-scroll" data-image-src="../assets/img/map.png">
       <div class="container xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -1007,7 +1007,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1084,8 +1084,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/projects.html b/public/html/projects.html
index cbb028e..3cc27b1 100644
--- a/public/html/projects.html
+++ b/public/html/projects.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -597,17 +597,17 @@
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Cursus Inceptos Sit</h5>'><a href="assets/img/photos/cs1-full.jpg" data-glightbox="title: Cursus Inceptos Sit" data-gallery="project-1"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs1.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Cursus Inceptos Sit</h5>'><a href="../assets/img/photos/cs1-full.jpg" data-glightbox="title: Cursus Inceptos Sit" data-gallery="project-1"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs1.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Ipsum Egestas Porta</h5>'><a href="assets/img/photos/cs2-full.jpg" data-glightbox="title: Ipsum Egestas Porta" data-gallery="project-1"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs2.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Ipsum Egestas Porta</h5>'><a href="../assets/img/photos/cs2-full.jpg" data-glightbox="title: Ipsum Egestas Porta" data-gallery="project-1"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs2.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Ultricies Cras Tortor</h5>'><a href="assets/img/photos/cs3-full.jpg" data-glightbox="title: Ultricies Cras Tortor" data-gallery="project-1"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs3.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Ultricies Cras Tortor</h5>'><a href="../assets/img/photos/cs3-full.jpg" data-glightbox="title: Ultricies Cras Tortor" data-gallery="project-1"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs3.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
@@ -634,17 +634,17 @@
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Purus Tellus Magna</h5>'><a href="assets/img/photos/cs4-full.jpg" data-glightbox="title: Purus Tellus Magna" data-gallery="project-2"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs4.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Purus Tellus Magna</h5>'><a href="../assets/img/photos/cs4-full.jpg" data-glightbox="title: Purus Tellus Magna" data-gallery="project-2"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs4.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Fusce Ipsum Vestibulum</h5>'><a href="assets/img/photos/cs5-full.jpg" data-glightbox="title: Fusce Ipsum Vestibulum" data-gallery="project-2"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs5.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Fusce Ipsum Vestibulum</h5>'><a href="../assets/img/photos/cs5-full.jpg" data-glightbox="title: Fusce Ipsum Vestibulum" data-gallery="project-2"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs5.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Condimentum Parturient Ligula</h5>'><a href="assets/img/photos/cs6-full.jpg" data-glightbox="title: Condimentum Parturient Ligula" data-gallery="project-2"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs6.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Condimentum Parturient Ligula</h5>'><a href="../assets/img/photos/cs6-full.jpg" data-glightbox="title: Condimentum Parturient Ligula" data-gallery="project-2"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs6.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
@@ -671,17 +671,17 @@
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Venenatis Amet Ipsum</h5>'><a href="assets/img/photos/cs7-full.jpg" data-glightbox="title: Venenatis Amet Ipsum" data-gallery="project-3"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs7.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Venenatis Amet Ipsum</h5>'><a href="../assets/img/photos/cs7-full.jpg" data-glightbox="title: Venenatis Amet Ipsum" data-gallery="project-3"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs7.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Quam Vehicula Condimentum</h5>'><a href="assets/img/photos/cs8-full.jpg" data-glightbox="title: Quam Vehicula Condimentum" data-gallery="project-3"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs8.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Quam Vehicula Condimentum</h5>'><a href="../assets/img/photos/cs8-full.jpg" data-glightbox="title: Quam Vehicula Condimentum" data-gallery="project-3"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs8.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Commodo Fusce Dapibus</h5>'><a href="assets/img/photos/cs9-full.jpg" data-glightbox="title: Commodo Fusce Dapibus" data-gallery="project-3"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs9.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Commodo Fusce Dapibus</h5>'><a href="../assets/img/photos/cs9-full.jpg" data-glightbox="title: Commodo Fusce Dapibus" data-gallery="project-3"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs9.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
@@ -708,17 +708,17 @@
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Cras Ullamcorper Tellus</h5>'><a href="assets/img/photos/cs10-full.jpg" data-glightbox="title: Cras Ullamcorper Tellus" data-gallery="project-4"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs10.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Cras Ullamcorper Tellus</h5>'><a href="../assets/img/photos/cs10-full.jpg" data-glightbox="title: Cras Ullamcorper Tellus" data-gallery="project-4"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs10.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Quam Bibendum Ornare</h5>'><a href="assets/img/photos/cs11-full.jpg" data-glightbox="title: Quam Bibendum Ornare" data-gallery="project-4"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs11.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Quam Bibendum Ornare</h5>'><a href="../assets/img/photos/cs11-full.jpg" data-glightbox="title: Quam Bibendum Ornare" data-gallery="project-4"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs11.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Ullamcorper Etiam Malesuada</h5>'><a href="assets/img/photos/cs12-full.jpg" data-glightbox="title: Ullamcorper Etiam Malesuada" data-gallery="project-4"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs12.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Ullamcorper Etiam Malesuada</h5>'><a href="../assets/img/photos/cs12-full.jpg" data-glightbox="title: Ullamcorper Etiam Malesuada" data-gallery="project-4"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs12.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
@@ -745,17 +745,17 @@
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Aenean Dolor Tristique</h5>'><a href="assets/img/photos/cs13-full.jpg" data-glightbox="title: Aenean Dolor Tristique" data-gallery="project-5"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs13.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Aenean Dolor Tristique</h5>'><a href="../assets/img/photos/cs13-full.jpg" data-glightbox="title: Aenean Dolor Tristique" data-gallery="project-5"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs13.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Magna Ipsum Euismod</h5>'><a href="assets/img/photos/cs14-full.jpg" data-glightbox="title: Magna Ipsum Euismod" data-gallery="project-5"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs14.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Magna Ipsum Euismod</h5>'><a href="../assets/img/photos/cs14-full.jpg" data-glightbox="title: Magna Ipsum Euismod" data-gallery="project-5"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs14.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
                   <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Fusce Mollis</h5>'><a href="assets/img/photos/cs15-full.jpg" data-glightbox="title: Fusce Mollis" data-gallery="project-5"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/cs15.jpg" alt="image"></a>
+                    <figure class="itooltip itooltip-light hover-scale rounded group" title='<h5 class="!mb-0">Fusce Mollis</h5>'><a href="../assets/img/photos/cs15-full.jpg" data-glightbox="title: Fusce Mollis" data-gallery="project-5"> <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/cs15.jpg" alt="image"></a>
                     </figure>
                   </div>
                   <!-- /.item -->
@@ -780,7 +780,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -857,8 +857,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/projects2.html b/public/html/projects2.html
index 1aae0c7..ee85004 100644
--- a/public/html/projects2.html
+++ b/public/html/projects2.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -576,7 +576,7 @@
         <div class="projects-overflow !mb-10 xl:!mb-20 lg:!mb-20 xl:!mt-10 lg:!mt-10 md:!mt-10">
           <div class="project item">
             <div class="flex flex-wrap mx-[-15px]">
-              <figure class="lg:w-8/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] rounded"> <img src="assets/img/photos/cs16.jpg" alt="image"></figure>
+              <figure class="lg:w-8/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] rounded"> <img src="../assets/img/photos/cs16.jpg" alt="image"></figure>
               <div class="project-details flex justify-center flex-col !px-[15px]" style="right: 10%; bottom: 25%;">
                 <div class="card  shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rellax" data-rellax-xs-speed="0" data-rellax-mobile-speed="0">
                   <div class="card-body flex-[1_1_auto] p-[40px]">
@@ -602,7 +602,7 @@
           <!-- /.project -->
           <div class="project item">
             <div class="flex flex-wrap mx-[-15px]">
-              <figure class="xl:w-6/12 lg:w-7/12 xl:!ml-[41.66666667%] lg:!ml-[41.66666667%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="assets/img/photos/cs17.jpg" alt="image"></figure>
+              <figure class="xl:w-6/12 lg:w-7/12 xl:!ml-[41.66666667%] lg:!ml-[41.66666667%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="../assets/img/photos/cs17.jpg" alt="image"></figure>
               <div class="project-details flex justify-center flex-col !px-[15px]" style="left: 18%; bottom: 25%;">
                 <div class="card  shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rellax" data-rellax-xs-speed="0" data-rellax-mobile-speed="0">
                   <div class="card-body flex-[1_1_auto] p-[40px]">
@@ -628,7 +628,7 @@
           <!-- /.project -->
           <div class="project item">
             <div class="flex flex-wrap mx-[-15px]">
-              <figure class="lg:w-9/12 xl:w-7/12 xl:!ml-[16.66666667%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="assets/img/photos/cs18.jpg" alt="image"></figure>
+              <figure class="lg:w-9/12 xl:w-7/12 xl:!ml-[16.66666667%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="../assets/img/photos/cs18.jpg" alt="image"></figure>
               <div class="project-details flex justify-center flex-col !px-[15px]" style="right: 3%; bottom: 25%;">
                 <div class="card  shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rellax" data-rellax-xs-speed="0" data-rellax-mobile-speed="0">
                   <div class="card-body flex-[1_1_auto] p-[40px]">
@@ -654,7 +654,7 @@
           <!-- /.project -->
           <div class="project item">
             <div class="flex flex-wrap mx-[-15px]">
-              <figure class="lg:w-9/12 lg:!ml-[25%] xl:w-7/12 xl:!ml-[33.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="assets/img/photos/cs19.jpg" alt="image"></figure>
+              <figure class="lg:w-9/12 lg:!ml-[25%] xl:w-7/12 xl:!ml-[33.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="../assets/img/photos/cs19.jpg" alt="image"></figure>
               <div class="project-details flex justify-center flex-col !px-[15px]" style="left: 12%; bottom: 25%;">
                 <div class="card  shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rellax" data-rellax-xs-speed="0" data-rellax-mobile-speed="0">
                   <div class="card-body flex-[1_1_auto] p-[40px]">
@@ -680,7 +680,7 @@
           <!-- /.project -->
           <div class="project item">
             <div class="flex flex-wrap mx-[-15px]">
-              <figure class="lg:w-8/12 xl:w-6/12 xl:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="assets/img/photos/cs20.jpg" alt="image"></figure>
+              <figure class="lg:w-8/12 xl:w-6/12 xl:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="../assets/img/photos/cs20.jpg" alt="image"></figure>
               <div class="project-details flex justify-center flex-col !px-[15px]" style="right: 15%; bottom: 25%;">
                 <div class="card  shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rellax" data-rellax-xs-speed="0" data-rellax-mobile-speed="0">
                   <div class="card-body flex-[1_1_auto] p-[40px]">
@@ -706,7 +706,7 @@
           <!-- /.project -->
           <div class="project item">
             <div class="flex flex-wrap mx-[-15px]">
-              <figure class="lg:w-9/12 lg:!ml-[25%] xl:w-7/12 xl:!ml-[41.66666667%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="assets/img/photos/cs21.jpg" alt="image"></figure>
+              <figure class="lg:w-9/12 lg:!ml-[25%] xl:w-7/12 xl:!ml-[41.66666667%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="../assets/img/photos/cs21.jpg" alt="image"></figure>
               <div class="project-details flex justify-center  flex-col ms-lg-n150 xl:!ml-0" style="left: 18%; bottom: 25%;">
                 <div class="card  shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rellax" data-rellax-xs-speed="0" data-rellax-mobile-speed="0">
                   <div class="card-body flex-[1_1_auto] p-[40px]">
@@ -732,7 +732,7 @@
           <!-- /.project -->
           <div class="project item">
             <div class="flex flex-wrap mx-[-15px]">
-              <figure class="lg:w-8/12 xl:w-6/12 xl:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="assets/img/photos/cs22.jpg" alt="image"></figure>
+              <figure class="lg:w-8/12 xl:w-6/12 xl:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full rounded"> <img src="../assets/img/photos/cs22.jpg" alt="image"></figure>
               <div class="project-details flex justify-center flex-col !px-[15px]" style="right: 15%; bottom: 25%;">
                 <div class="card  shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rellax" data-rellax-xs-speed="0" data-rellax-mobile-speed="0">
                   <div class="card-body flex-[1_1_auto] p-[40px]">
@@ -788,7 +788,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -865,8 +865,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/projects3.html b/public/html/projects3.html
index a4171c3..8b9cedb 100644
--- a/public/html/projects3.html
+++ b/public/html/projects3.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -585,7 +585,7 @@
           </div>
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-25px] lg:mx-[-25px] md:mx-[-25px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
             <div class="project item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[25px] lg:!mt-[80px] lg:!px-[25px] md:!mt-[80px] md:!px-[25px] !px-[15px] !mt-[50px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/cs16.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/cs16.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#747ed1] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1] !mb-2">Cosmetic</div>
@@ -597,7 +597,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[25px] lg:!mt-[80px] lg:!px-[25px] md:!mt-[80px] md:!px-[25px] !px-[15px] !mt-[50px] max-w-full workshop">
-              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="assets/img/photos/cs17.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/cs17.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#7cb798] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#7cb798] !mb-2">Coffee</div>
@@ -609,7 +609,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[25px] lg:!mt-[80px] lg:!px-[25px] md:!mt-[80px] md:!px-[25px] !px-[15px] !mt-[50px] max-w-full still-life">
-              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="assets/img/photos/cs18.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/cs18.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#a07cc5] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#a07cc5] !mb-2">Still Life</div>
@@ -621,7 +621,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[25px] lg:!mt-[80px] lg:!px-[25px] md:!mt-[80px] md:!px-[25px] !px-[15px] !mt-[50px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/cs19.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/cs19.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#fab758] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#fab758] !mb-2">Product</div>
@@ -633,7 +633,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[25px] lg:!mt-[80px] lg:!px-[25px] md:!mt-[80px] md:!px-[25px] !px-[15px] !mt-[50px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="assets/img/photos/cs20.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/cs20.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#f78b77] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#f78b77] !mb-2">Product</div>
@@ -645,7 +645,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[25px] lg:!mt-[80px] lg:!px-[25px] md:!mt-[80px] md:!px-[25px] !px-[15px] !mt-[50px] max-w-full workshop">
-              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="assets/img/photos/cs21.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/cs21.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#45c4a0] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#45c4a0] !mb-2">Workshop</div>
@@ -657,7 +657,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[25px] lg:!mt-[80px] lg:!px-[25px] md:!mt-[80px] md:!px-[25px] !px-[15px] !mt-[50px] max-w-full concept">
-              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/cs22.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/cs22.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#e2626b] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e2626b] !mb-2">Concept</div>
@@ -669,7 +669,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[25px] lg:!mt-[80px] lg:!px-[25px] md:!mt-[80px] md:!px-[25px] !px-[15px] !mt-[50px] max-w-full concept still-life">
-              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="assets/img/photos/cs23.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/cs23.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#54a8c7] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !mb-2">Concept</div>
@@ -681,7 +681,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[25px] lg:!mt-[80px] lg:!px-[25px] md:!mt-[80px] md:!px-[25px] !px-[15px] !mt-[50px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="assets/img/photos/cs24.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/cs24.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#747ed1] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1] !mb-2">Product</div>
@@ -693,7 +693,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[25px] lg:!mt-[80px] lg:!px-[25px] md:!mt-[80px] md:!px-[25px] !px-[15px] !mt-[50px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/cs25.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/cs25.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#d16b86] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#d16b86] !mb-2">Product</div>
@@ -719,7 +719,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -796,8 +796,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/projects4.html b/public/html/projects4.html
index 406852a..fb7032d 100644
--- a/public/html/projects4.html
+++ b/public/html/projects4.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -586,7 +586,7 @@
           </div>
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[20px] lg:!mt-[80px] lg:!px-[20px] md:!mt-[80px] md:!px-[20px] !px-[15px] !mt-[50px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/cs16.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/cs16.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#747ed1] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1] !mb-2">Cosmetic</div>
@@ -598,7 +598,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[20px] lg:!mt-[80px] lg:!px-[20px] md:!mt-[80px] md:!px-[20px] !px-[15px] !mt-[50px] max-w-full workshop">
-              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="assets/img/photos/cs17.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/cs17.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#7cb798] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#7cb798] !mb-2">Coffee</div>
@@ -610,7 +610,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[20px] lg:!mt-[80px] lg:!px-[20px] md:!mt-[80px] md:!px-[20px] !px-[15px] !mt-[50px] max-w-full still-life">
-              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="assets/img/photos/cs18.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/cs18.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#a07cc5] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#a07cc5] !mb-2">Still Life</div>
@@ -622,7 +622,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[20px] lg:!mt-[80px] lg:!px-[20px] md:!mt-[80px] md:!px-[20px] !px-[15px] !mt-[50px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/cs20.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/cs20.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#fab758] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#fab758] !mb-2">Product</div>
@@ -634,7 +634,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[20px] lg:!mt-[80px] lg:!px-[20px] md:!mt-[80px] md:!px-[20px] !px-[15px] !mt-[50px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="assets/img/photos/cs19.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/cs19.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#f78b77] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#f78b77] !mb-2">Product</div>
@@ -646,7 +646,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[20px] lg:!mt-[80px] lg:!px-[20px] md:!mt-[80px] md:!px-[20px] !px-[15px] !mt-[50px] max-w-full workshop">
-              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="assets/img/photos/cs21.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/cs21.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#45c4a0] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#45c4a0] !mb-2">Workshop</div>
@@ -658,7 +658,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[20px] lg:!mt-[80px] lg:!px-[20px] md:!mt-[80px] md:!px-[20px] !px-[15px] !mt-[50px] max-w-full concept">
-              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="assets/img/photos/cs22.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/cs22.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#e2626b] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e2626b] !mb-2">Concept</div>
@@ -670,7 +670,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[20px] lg:!mt-[80px] lg:!px-[20px] md:!mt-[80px] md:!px-[20px] !px-[15px] !mt-[50px] max-w-full concept still-life">
-              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="assets/img/photos/cs23.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/cs23.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#54a8c7] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !mb-2">Concept</div>
@@ -682,7 +682,7 @@
             </div>
             <!-- /.project -->
             <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!mt-[80px] xl:!px-[20px] lg:!mt-[80px] lg:!px-[20px] md:!mt-[80px] md:!px-[20px] !px-[15px] !mt-[50px] max-w-full product">
-              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="assets/img/photos/cs24.jpg" alt="image"></a></figure>
+              <figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/cs24.jpg" alt="image"></a></figure>
               <div class="project-details flex justify-center flex-col">
                 <div class="post-header">
                   <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold relative align-top !pl-[1.4rem] opacity-100 !text-[#747ed1] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1] !mb-2">Product</div>
@@ -708,7 +708,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -785,8 +785,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/services.html b/public/html/services.html
index 178bb34..edefcd3 100644
--- a/public/html/services.html
+++ b/public/html/services.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -575,10 +575,10 @@
       <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
         <div class="flex flex-wrap mx-[-15px] !mb-8">
           <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[-10rem]">
-            <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/about5.jpg" alt="image"></figure>
+            <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about5.jpg" alt="image"></figure>
             <div class="flex flex-wrap mx-[-15px]">
               <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-                <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0  xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="assets/img/photos/bg3.jpg">
+                <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0  xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="../assets/img/photos/bg3.jpg">
                   <div class="card-body p-[2.25rem] xl:!p-[2.5rem]">
                     <div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-20px] !text-center">
                       <div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
@@ -619,19 +619,19 @@
           <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[20px] !mt-[40px] max-w-full xl:!order-2 lg:!order-2">
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[16.66666667%] !self-end !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g1.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g1.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !self-end !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g2.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g2.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%] !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g3.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g3.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-start !mt-[25px]">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g4.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g4.jpg" alt="image"></figure>
               </div>
               <!--/column -->
             </div>
@@ -725,7 +725,7 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-    <section class="wrapper image-wrapper bg-image bg-overlay bg-no-repeat bg-[center_center] bg-cover !relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="assets/img/photos/bg1.jpg">
+    <section class="wrapper image-wrapper bg-image bg-overlay bg-no-repeat bg-[center_center] bg-cover !relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="../assets/img/photos/bg1.jpg">
       <div class="container py-[8rem] !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="lg:w-10/12 xl:w-10/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -819,13 +819,13 @@
             <div class="shape bg-dot primary rellax !w-[8rem] !h-[8rem] bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: 0; left: -1.4rem; z-index: 0;"></div>
             <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
-                <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="assets/img/photos/g5.jpg" alt="image"></figure>
+                <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="../assets/img/photos/g5.jpg" alt="image"></figure>
               </div>
               <!--/column -->
               <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
                 <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
                   <div class="w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
-                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g6.jpg" alt="image"></figure>
+                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g6.jpg" alt="image"></figure>
                   </div>
                   <!--/column -->
                   <div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
@@ -867,7 +867,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -944,8 +944,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/services2.html b/public/html/services2.html
index ea07867..c420170 100644
--- a/public/html/services2.html
+++ b/public/html/services2.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,8 +24,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
           <a href='index.html'>
-            <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-            <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+            <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
           </a>
         </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -42,205 +42,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -354,87 +354,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -558,7 +558,7 @@
       <!-- /.navbar -->
     </header>
     <!-- /header -->
-    <section class="wrapper image-wrapper bg-image bg-overlay !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="assets/img/photos/bg1.jpg">
+    <section class="wrapper image-wrapper bg-image bg-overlay !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="../assets/img/photos/bg1.jpg">
       <div class="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] pb-32 xl:pb-40 lg:pb-40 md:pb-40 !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="md:w-10/12 lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -649,9 +649,9 @@
             <div class="lg:!mt-[-10rem] xl:!mt-[-15rem] !relative">
               <div class="shape bg-dot red rellax !w-[6rem] !h-[8rem] absolute opacity-50 bg-[radial-gradient(#e2626b_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: 1rem; left: -3.9rem;"></div>
               <div class="shape !rounded-[50%] bg-line primary rellax !w-[8rem] !h-[8rem] absolute opacity-50" data-rellax-speed="1" style="bottom: 2rem; right: -3rem;"></div>
-              <video poster="assets/img/photos/movie.jpg" class="player relative z-[2] rounded-[0.4rem]" playsinline controls preload="none">
-                <source src="assets/media/movie.mp4" type="video/mp4">
-                <source src="assets/media/movie.html" type="video/webm">
+              <video poster="../assets/img/photos/movie.jpg" class="player relative z-[2] rounded-[0.4rem]" playsinline controls preload="none">
+                <source src="../assets/media/movie.mp4" type="video/mp4">
+                <source src="../assets/media/movie.html" type="video/webm">
               </video>
             </div>
           </div>
@@ -692,7 +692,7 @@
       <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-24 lg:!mb-24 md:!mb-24 items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i8.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i8.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -722,7 +722,7 @@
         <!--/.row -->
         <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
           <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
-            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i7.png" alt="image"></figure>
+            <figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i7.png" alt="image"></figure>
           </div>
           <!--/column -->
           <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
@@ -862,7 +862,7 @@
       <!-- /.container -->
     </section>
     <!-- /section -->
-    <section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-[0]" data-image-src="assets/img/map.png">
+    <section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-[0]" data-image-src="../assets/img/map.png">
       <div class="container pt-0 pb-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 xl:pb-32 lg:pb-32 md:pb-32">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -907,7 +907,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -984,8 +984,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/shop-cart.html b/public/html/shop-cart.html
index 56db5c1..549c663 100644
--- a/public/html/shop-cart.html
+++ b/public/html/shop-cart.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -561,7 +561,7 @@
           <div class="shopping-cart">
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth1.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth1.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Nike Air Sneakers</a></h3>
                   <p class="price !text-[.7rem]"><del class="!text-[#9499a3]"><span class="amount">$55.00</span></del> <ins class="no-underline !text-[#e2626b]"><span class="amount">$45.99</span></ins></p>
@@ -582,7 +582,7 @@
             <!--/.shopping-cart-item -->
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth2.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth2.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Colorful Sneakers</a></h3>
                   <p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
@@ -603,7 +603,7 @@
             <!--/.shopping-cart-item -->
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth3.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth3.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Polaroid Camera</a></h3>
                   <p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
@@ -690,7 +690,7 @@
                 <tbody>
                   <tr>
                     <td class="option text-left flex flex-row items-center !pl-0">
-                      <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth1.jpg" alt="image"></a></figure>
+                      <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth1.jpg" alt="image"></a></figure>
                       <div class="w-full !ml-4">
                         <h3 class="post-title h6 !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Nike Air Sneakers</a></h3>
                         <div class="small">Color: Black</div>
@@ -721,7 +721,7 @@
                   </tr>
                   <tr>
                     <td class="option text-left flex flex-row items-center !pl-0">
-                      <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth2.jpg" alt="image"></a></figure>
+                      <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth2.jpg" alt="image"></a></figure>
                       <div class="w-full !ml-4">
                         <h3 class="post-title h6 !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Colorful Sneakers</a></h3>
                         <div class="small">Color: Misc</div>
@@ -752,7 +752,7 @@
                   </tr>
                   <tr>
                     <td class="option text-left flex flex-row items-center !pl-0">
-                      <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth3.jpg" alt="image"></a></figure>
+                      <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth3.jpg" alt="image"></a></figure>
                       <div class="w-full !ml-4">
                         <h3 class="post-title h6 !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Polaroid Camera</a></h3>
                         <div class="small">Color: Black</div>
@@ -896,7 +896,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -973,8 +973,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/shop-checkout.html b/public/html/shop-checkout.html
index f5f6556..b3d0aab 100644
--- a/public/html/shop-checkout.html
+++ b/public/html/shop-checkout.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -561,7 +561,7 @@
           <div class="shopping-cart">
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth1.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth1.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Nike Air Sneakers</a></h3>
                   <p class="price !text-[.7rem]"><del class="!text-[#9499a3]"><span class="amount">$55.00</span></del> <ins class="no-underline !text-[#e2626b]"><span class="amount">$45.99</span></ins></p>
@@ -582,7 +582,7 @@
             <!--/.shopping-cart-item -->
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth2.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth2.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Colorful Sneakers</a></h3>
                   <p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
@@ -603,7 +603,7 @@
             <!--/.shopping-cart-item -->
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth3.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth3.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Polaroid Camera</a></h3>
                   <p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
@@ -802,7 +802,7 @@
             <div class="shopping-cart !mb-7">
               <div class="shopping-cart-item flex justify-between !mb-4">
                 <div class="flex flex-row flex items-center">
-                  <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth1.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth1.jpg" alt="image"></a></figure>
                   <div class="w-full !ml-4">
                     <h3 class="post-title h6 !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Nike Air Sneakers</a></h3>
                     <div class="small">Color: Black</div>
@@ -816,7 +816,7 @@
               <!--/.shopping-cart-item -->
               <div class="shopping-cart-item flex justify-between !mb-4">
                 <div class="flex flex-row flex items-center">
-                  <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth2.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth2.jpg" alt="image"></a></figure>
                   <div class="w-full !ml-4">
                     <h3 class="post-title h6 !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Colorful Sneakers</a></h3>
                     <div class="small">Color: Misc</div>
@@ -830,7 +830,7 @@
               <!--/.shopping-cart-item -->
               <div class="shopping-cart-item flex justify-between !mb-4">
                 <div class="flex flex-row flex items-center">
-                  <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth3.jpg" alt="image"></a></figure>
+                  <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth3.jpg" alt="image"></a></figure>
                   <div class="w-full !ml-4">
                     <h3 class="post-title h6 !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Polaroid Camera</a></h3>
                     <div class="small">Color: Black</div>
@@ -1030,7 +1030,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1107,8 +1107,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/shop-product.html b/public/html/shop-product.html
index 2f061c8..763828f 100644
--- a/public/html/shop-product.html
+++ b/public/html/shop-product.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
   <style>
     .tooltip {
@@ -30,7 +30,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -47,205 +47,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -359,87 +359,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -567,7 +567,7 @@
           <div class="shopping-cart">
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth1.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth1.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Nike Air Sneakers</a></h3>
                   <p class="price !text-[.7rem]"><del class="!text-[#9499a3]"><span class="amount">$55.00</span></del> <ins class="no-underline !text-[#e2626b]"><span class="amount">$45.99</span></ins></p>
@@ -588,7 +588,7 @@
             <!--/.shopping-cart-item -->
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth2.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth2.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Colorful Sneakers</a></h3>
                   <p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
@@ -609,7 +609,7 @@
             <!--/.shopping-cart-item -->
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth3.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth3.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Polaroid Camera</a></h3>
                   <p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
@@ -679,19 +679,19 @@
               <div class="swiper">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide group">
-                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/shs1.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/shs1%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/shs1.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/shs1%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide group">
-                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/shs2.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/shs2%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/shs2.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/shs2%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide group">
-                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/shs3.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/shs3%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/shs3.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/shs3%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide group">
-                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/shs4.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="assets/img/photos/shs4%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
+                    <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/shs4.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/shs4%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
                   </div>
                   <!--/.swiper-slide -->
                 </div>
@@ -700,10 +700,10 @@
               <!-- /.swiper -->
               <div class="swiper swiper-thumbs">
                 <div class="swiper-wrapper">
-                  <div class="swiper-slide"><img src="assets/img/photos/shs1-th.jpg" class="rounded-[.4rem]" alt="image"></div>
-                  <div class="swiper-slide"><img src="assets/img/photos/shs2-th.jpg" class="rounded-[.4rem]" alt="image"></div>
-                  <div class="swiper-slide"><img src="assets/img/photos/shs3-th.jpg" class="rounded-[.4rem]" alt="image"></div>
-                  <div class="swiper-slide"><img src="assets/img/photos/shs4-th.jpg" class="rounded-[.4rem]" alt="image"></div>
+                  <div class="swiper-slide"><img src="../assets/img/photos/shs1-th.jpg" class="rounded-[.4rem]" alt="image"></div>
+                  <div class="swiper-slide"><img src="../assets/img/photos/shs2-th.jpg" class="rounded-[.4rem]" alt="image"></div>
+                  <div class="swiper-slide"><img src="../assets/img/photos/shs3-th.jpg" class="rounded-[.4rem]" alt="image"></div>
+                  <div class="swiper-slide"><img src="../assets/img/photos/shs4-th.jpg" class="rounded-[.4rem]" alt="image"></div>
                 </div>
                 <!--/.swiper-wrapper -->
               </div>
@@ -939,7 +939,7 @@
               <ol id="singlecomments" class="commentlist m-0 p-0 list-none">
                 <li class="comment !mt-8">
                   <div class="comment-header !mb-2 xl:!flex lg:!flex md:!flex items-center">
-                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u1.jpg"></figure>
+                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u1.jpg"></figure>
                     <div>
                       <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Connor Gibson</a></h6>
                       <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -965,7 +965,7 @@
                 </li>
                 <li class="comment !mt-8">
                   <div class="comment-header !mb-2 xl:!flex lg:!flex md:!flex items-center">
-                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u2.jpg"></figure>
                     <div>
                       <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                       <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -991,7 +991,7 @@
                 </li>
                 <li class="comment !mt-8">
                   <div class="flex items-center">
-                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u3.jpg"></figure>
+                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u3.jpg"></figure>
                     <div>
                       <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Pearce Frye</a></h6>
                       <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -1017,7 +1017,7 @@
                 </li>
                 <li class="comment !mt-8">
                   <div class="flex items-center">
-                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u2.jpg"></figure>
                     <div>
                       <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
                       <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -1043,7 +1043,7 @@
                 </li>
                 <li class="comment !mt-8">
                   <div class="comment-header !mb-2 xl:!flex lg:!flex md:!flex items-center">
-                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u4.jpg"></figure>
+                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="../assets/img/avatars/u4.jpg"></figure>
                     <div>
                       <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Lou Bloxham</a></h6>
                       <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
@@ -1102,7 +1102,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
             <div class="flex flex-row">
               <div>
-                <img src="assets/img/icons/solid/shipment.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono !text-[#343f52] text-navy !mr-4" alt="image">
+                <img src="../assets/img/icons/solid/shipment.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono !text-[#343f52] text-navy !mr-4" alt="image">
               </div>
               <div>
                 <h4 class="!mb-1">Free Shipping</h4>
@@ -1114,7 +1114,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
             <div class="flex flex-row">
               <div>
-                <img src="assets/img/icons/solid/push-cart.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono !text-[#343f52] text-navy !mr-4" alt="image">
+                <img src="../assets/img/icons/solid/push-cart.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono !text-[#343f52] text-navy !mr-4" alt="image">
               </div>
               <div>
                 <h4 class="!mb-1">30 Days Return</h4>
@@ -1126,7 +1126,7 @@
           <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
             <div class="flex flex-row">
               <div>
-                <img src="assets/img/icons/solid/verify.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono !text-[#343f52] text-navy !mr-4" alt="image">
+                <img src="../assets/img/icons/solid/verify.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono !text-[#343f52] text-navy !mr-4" alt="image">
               </div>
               <div>
                 <h4 class="!mb-1">2-Years Warranty</h4>
@@ -1148,7 +1148,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1225,8 +1225,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/shop.html b/public/html/shop.html
index cbf4ab4..87dfde6 100644
--- a/public/html/shop.html
+++ b/public/html/shop.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
   <style>
     .tooltip {
@@ -30,7 +30,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -47,205 +47,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -359,87 +359,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -567,7 +567,7 @@
           <div class="shopping-cart">
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth1.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth1.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Nike Air Sneakers</a></h3>
                   <p class="price !text-[.7rem]"><del class="!text-[#9499a3]"><span class="amount">$55.00</span></del> <ins class="no-underline !text-[#e2626b]"><span class="amount">$45.99</span></ins></p>
@@ -588,7 +588,7 @@
             <!--/.shopping-cart-item -->
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth2.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth2.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Colorful Sneakers</a></h3>
                   <p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
@@ -609,7 +609,7 @@
             <!--/.shopping-cart-item -->
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth3.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth3.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Polaroid Camera</a></h3>
                   <p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
@@ -703,7 +703,7 @@
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh1.jpg" alt="image">
+                <img src="../assets/img/photos/sh1.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -722,7 +722,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh2.jpg" alt="image">
+                <img src="../assets/img/photos/sh2.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -740,7 +740,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh3.jpg" alt="image">
+                <img src="../assets/img/photos/sh3.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -758,7 +758,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh4.jpg" alt="image">
+                <img src="../assets/img/photos/sh4.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -776,7 +776,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh5.jpg" alt="image">
+                <img src="../assets/img/photos/sh5.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -794,7 +794,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh6.jpg" alt="image">
+                <img src="../assets/img/photos/sh6.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -812,7 +812,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh7.jpg" alt="image">
+                <img src="../assets/img/photos/sh7.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -830,7 +830,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh8.jpg" alt="image">
+                <img src="../assets/img/photos/sh8.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -847,7 +847,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh9.jpg" alt="image">
+                <img src="../assets/img/photos/sh9.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -942,7 +942,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1019,8 +1019,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/shop2.html b/public/html/shop2.html
index 3c4edac..4574b57 100644
--- a/public/html/shop2.html
+++ b/public/html/shop2.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
   <style>
     .tooltip {
@@ -30,7 +30,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -47,205 +47,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -359,87 +359,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -567,7 +567,7 @@
           <div class="shopping-cart">
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth1.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth1.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Nike Air Sneakers</a></h3>
                   <p class="price !text-[.7rem]"><del class="!text-[#9499a3]"><span class="amount">$55.00</span></del> <ins class="no-underline !text-[#e2626b]"><span class="amount">$45.99</span></ins></p>
@@ -588,7 +588,7 @@
             <!--/.shopping-cart-item -->
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth2.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth2.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Colorful Sneakers</a></h3>
                   <p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
@@ -609,7 +609,7 @@
             <!--/.shopping-cart-item -->
             <div class="shopping-cart-item flex justify-between !mb-4">
               <div class="flex flex-row">
-                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="assets/img/photos/sth3.jpg" alt="image"></a></figure>
+                <figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth3.jpg" alt="image"></a></figure>
                 <div class="!w-full !ml-[1rem]">
                   <h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Polaroid Camera</a></h3>
                   <p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
@@ -698,7 +698,7 @@
           <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh1.jpg" alt="image">
+                <img src="../assets/img/photos/sh1.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -717,7 +717,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh2.jpg" alt="image">
+                <img src="../assets/img/photos/sh2.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -735,7 +735,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh3.jpg" alt="image">
+                <img src="../assets/img/photos/sh3.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -753,7 +753,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh4.jpg" alt="image">
+                <img src="../assets/img/photos/sh4.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -771,7 +771,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh5.jpg" alt="image">
+                <img src="../assets/img/photos/sh5.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -789,7 +789,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh6.jpg" alt="image">
+                <img src="../assets/img/photos/sh6.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -807,7 +807,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh7.jpg" alt="image">
+                <img src="../assets/img/photos/sh7.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -825,7 +825,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh8.jpg" alt="image">
+                <img src="../assets/img/photos/sh8.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -842,7 +842,7 @@
             <!-- /.item -->
             <div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
               <figure class="!rounded-[.4rem] !mb-6">
-                <img src="assets/img/photos/sh9.jpg" alt="image">
+                <img src="../assets/img/photos/sh9.jpg" alt="image">
                 <a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
                 <a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
                 <a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
@@ -1094,7 +1094,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -1171,8 +1171,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/signin.html b/public/html/signin.html
index bb6bad8..8d6e7f6 100644
--- a/public/html/signin.html
+++ b/public/html/signin.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -557,7 +557,7 @@
       <!-- /.navbar -->
     </header>
     <!-- /header -->
-    <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-light-600 !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="assets/img/photos/bg18.png">
+    <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-light-600 !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="../assets/img/photos/bg18.png">
       <div class="container pt-28 pb-40 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem] !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -626,7 +626,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -703,8 +703,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/signin2.html b/public/html/signin2.html
index 804622c..82ab5e3 100644
--- a/public/html/signin2.html
+++ b/public/html/signin2.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,8 +24,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-<img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-<img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+<img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+<img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -42,205 +42,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -354,87 +354,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -584,7 +584,7 @@
           <div class="!mt-[-9rem] w-full flex-[1_0_0%] !px-[15px] max-w-full !relative z-[3]">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="flex flex-wrap mx-0 !text-center">
-                <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start max-sm:!hidden !block bg-cover bg-[center_center] bg-no-repeat !bg-scroll md:min-h-[25rem]" data-image-src="assets/img/photos/tm3.jpg">
+                <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start max-sm:!hidden !block bg-cover bg-[center_center] bg-no-repeat !bg-scroll md:min-h-[25rem]" data-image-src="../assets/img/photos/tm3.jpg">
                 </div>
                 <!--/column -->
                 <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
@@ -636,7 +636,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -713,8 +713,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/signup.html b/public/html/signup.html
index 40e9c37..8dc5bfb 100644
--- a/public/html/signup.html
+++ b/public/html/signup.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -557,7 +557,7 @@
       <!-- /.navbar -->
     </header>
     <!-- /header -->
-    <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-light-600 !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="assets/img/photos/bg18.png">
+    <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-light-600 !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="../assets/img/photos/bg18.png">
       <div class="container pt-28 pb-40 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem] !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -634,7 +634,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -711,8 +711,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/signup2.html b/public/html/signup2.html
index 4d6706a..1856f2f 100644
--- a/public/html/signup2.html
+++ b/public/html/signup2.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,8 +24,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-<img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-<img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+<img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+<img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -42,205 +42,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -354,87 +354,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -584,7 +584,7 @@
           <div class="!mt-[-9rem] w-full flex-[1_0_0%] !px-[15px] max-w-full !relative z-[3]">
             <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
               <div class="flex flex-wrap mx-0 !text-center">
-                <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start max-sm:!hidden !block bg-cover bg-[center_center] bg-no-repeat !bg-scroll md:min-h-[25rem]" data-image-src="assets/img/photos/tm3.jpg">
+                <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start max-sm:!hidden !block bg-cover bg-[center_center] bg-no-repeat !bg-scroll md:min-h-[25rem]" data-image-src="../assets/img/photos/tm3.jpg">
                 </div>
                 <!--/column -->
                 <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
@@ -644,7 +644,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -721,8 +721,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/single-project.html b/public/html/single-project.html
index 654d43e..0eb6ebe 100644
--- a/public/html/single-project.html
+++ b/public/html/single-project.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -583,7 +583,7 @@
         <div class="flex flex-wrap mx-[-15px]">
           <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
             <article class="!mt-[-12.5rem]">
-              <figure class="!rounded-[.4rem] !mb-8 xl:!mb-[3.5rem] lg:!mb-[3.5rem] md:!mb-[3.5rem]"><img class="!rounded-[.4rem]" src="assets/img/photos/pp1.jpg" alt="image"></figure>
+              <figure class="!rounded-[.4rem] !mb-8 xl:!mb-[3.5rem] lg:!mb-[3.5rem] md:!mb-[3.5rem]"><img class="!rounded-[.4rem]" src="../assets/img/photos/pp1.jpg" alt="image"></figure>
               <div class="flex flex-wrap mx-[-15px]">
                 <div class="xl:w-10/12 xl:!ml-[8.33333333%] lg:w-10/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full">
                   <h2 class="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-4">About the Project</h2>
@@ -615,19 +615,19 @@
               <!--/.row -->
               <div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[25px]">
                 <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                  <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/pp2.jpg" data-glightbox data-gallery="project-1"><img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp2.jpg" alt="image"></a></figure>
+                  <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/pp2.jpg" data-glightbox data-gallery="project-1"><img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp2.jpg" alt="image"></a></figure>
                 </div>
                 <!--/column -->
                 <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                  <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/pp3.jpg" data-glightbox data-gallery="project-1"><img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp3.jpg" alt="image"></a></figure>
+                  <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/pp3.jpg" data-glightbox data-gallery="project-1"><img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp3.jpg" alt="image"></a></figure>
                 </div>
                 <!--/column -->
                 <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                  <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/pp4.jpg" data-glightbox data-gallery="project-1"><img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp4.jpg" alt="image"></a></figure>
+                  <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/pp4.jpg" data-glightbox data-gallery="project-1"><img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp4.jpg" alt="image"></a></figure>
                 </div>
                 <!--/column -->
                 <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
-                  <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/pp5.jpg" data-glightbox data-gallery="project-1"><img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp5.jpg" alt="image"></a></figure>
+                  <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="../assets/img/photos/pp5.jpg" data-glightbox data-gallery="project-1"><img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp5.jpg" alt="image"></a></figure>
                 </div>
                 <!--/column -->
               </div>
@@ -686,7 +686,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -763,8 +763,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/single-project2.html b/public/html/single-project2.html
index aace4f2..f133836 100644
--- a/public/html/single-project2.html
+++ b/public/html/single-project2.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -586,7 +586,7 @@
               <div class="swiper">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide !rounded-[.4rem]">
-                    <img class="!rounded-[.4rem]" src="assets/img/photos/pp7.jpg" alt="image">
+                    <img class="!rounded-[.4rem]" src="../assets/img/photos/pp7.jpg" alt="image">
                     <div class="caption-wrapper p-14">
                       <div class="caption bg-[rgba(255,255,255)] opacity-100 !rounded-[.4rem] px-4 py-3 !ml-auto !mt-auto animate__animated animate__slideInDown animate__delay-1s">
                         <h5 class="!mb-0">Vivamus sagittis lacus augue</h5>
@@ -597,7 +597,7 @@
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide !rounded-[.4rem]">
-                    <img class="!rounded-[.4rem]" src="assets/img/photos/pp8.jpg" alt="image">
+                    <img class="!rounded-[.4rem]" src="../assets/img/photos/pp8.jpg" alt="image">
                     <div class="caption-wrapper p-14">
                       <div class="caption bg-[rgba(255,255,255)] opacity-100 !rounded-[.4rem] px-4 py-3 !mx-auto !mt-auto animate__animated animate__slideInDown animate__delay-1s">
                         <h5 class="!mb-0">Vivamus sagittis lacus augue</h5>
@@ -608,7 +608,7 @@
                   </div>
                   <!--/.swiper-slide -->
                   <div class="swiper-slide !rounded-[.4rem]">
-                    <img class="!rounded-[.4rem]" src="assets/img/photos/pp9.jpg" alt="image">
+                    <img class="!rounded-[.4rem]" src="../assets/img/photos/pp9.jpg" alt="image">
                     <div class="caption-wrapper p-14">
                       <div class="caption bg-[rgba(255,255,255)] opacity-100 !rounded-[.4rem] px-4 py-3 !mt-auto animate__animated animate__slideInDown animate__delay-1s">
                         <h5 class="!mb-0">Vivamus sagittis lacus augue</h5>
@@ -696,7 +696,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -773,8 +773,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/single-project3.html b/public/html/single-project3.html
index 38ee8ea..9c4c435 100644
--- a/public/html/single-project3.html
+++ b/public/html/single-project3.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,8 +24,8 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
           <a href='index.html'>
-            <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
-            <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
+            <img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
           </a>
         </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -42,205 +42,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -354,87 +354,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -558,7 +558,7 @@
       <!-- /.navbar -->
     </header>
     <!-- /header -->
-    <section class="wrapper image-wrapper bg-image bg-overlay !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,0.5)]" data-image-src="assets/img/photos/bg6.jpg">
+    <section class="wrapper image-wrapper bg-image bg-overlay !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,0.5)]" data-image-src="../assets/img/photos/bg6.jpg">
       <div class="container pt-28 pb-14 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-24 lg:pb-24 md:pb-24 !text-center">
         <div class="flex flex-wrap mx-[-15px]">
           <div class="md:w-10/12 lg:w-8/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -617,31 +617,31 @@
           <div class="swiper">
             <div class="swiper-wrapper">
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp10.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp10.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp11.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp11.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp12.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp12.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp13.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp13.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp14.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp14.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp15.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp15.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
               <div class="swiper-slide">
-                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/pp16.jpg" alt="image"></figure>
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/pp16.jpg" alt="image"></figure>
               </div>
               <!--/.swiper-slide -->
             </div>
@@ -689,7 +689,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -766,8 +766,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/single-project4.html b/public/html/single-project4.html
index 2716ac2..cdbffd6 100644
--- a/public/html/single-project4.html
+++ b/public/html/single-project4.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -557,7 +557,7 @@
       <!-- /.navbar -->
     </header>
     <!-- /header -->
-    <div class="wrapper image-wrapper bg-image h-[30rem] max-lg:h-[25rem] bg-cover bg-[center_center] bg-no-repeat !bg-scroll relative z-0" data-image-src="assets/img/photos/pp23.jpg"></div>
+    <div class="wrapper image-wrapper bg-image h-[30rem] max-lg:h-[25rem] bg-cover bg-[center_center] bg-no-repeat !bg-scroll relative z-0" data-image-src="../assets/img/photos/pp23.jpg"></div>
     <section class="wrapper !bg-[#ffffff]  border-b-[rgba(164,174,198,0.2)] border-b border-solid">
       <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
         <div class="flex flex-wrap mx-[-15px]">
@@ -592,24 +592,24 @@
         <div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-14">
           <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
             <figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
-              <a href="assets/img/photos/pp24%402x.jpg" data-glightbox data-gallery="project-4">
-                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp24.jpg" alt="image">
+              <a href="../assets/img/photos/pp24%402x.jpg" data-glightbox data-gallery="project-4">
+                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp24.jpg" alt="image">
               </a>
             </figure>
           </div>
           <!-- /column -->
           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
             <figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
-              <a href="assets/img/photos/pp25%402x.jpg" data-glightbox data-gallery="project-4">
-                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp25.jpg" alt="image">
+              <a href="../assets/img/photos/pp25%402x.jpg" data-glightbox data-gallery="project-4">
+                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp25.jpg" alt="image">
               </a>
             </figure>
           </div>
           <!-- /column -->
           <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
             <figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
-              <a href="assets/img/photos/pp26%402x.jpg" data-glightbox data-gallery="project-4">
-                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp26.jpg" alt="image">
+              <a href="../assets/img/photos/pp26%402x.jpg" data-glightbox data-gallery="project-4">
+                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp26.jpg" alt="image">
               </a>
             </figure>
           </div>
@@ -628,32 +628,32 @@
         <div class="flex flex-wrap mx-[-15px] !mt-[-30px]">
           <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
             <figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
-              <a href="assets/img/photos/pp27%402x.jpg" data-glightbox data-gallery="project-4">
-                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp27.jpg" alt="image">
+              <a href="../assets/img/photos/pp27%402x.jpg" data-glightbox data-gallery="project-4">
+                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp27.jpg" alt="image">
               </a>
             </figure>
           </div>
           <!-- /column -->
           <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
             <figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
-              <a href="assets/img/photos/pp28%402x.jpg" data-glightbox data-gallery="project-4">
-                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp28.jpg" alt="image">
+              <a href="../assets/img/photos/pp28%402x.jpg" data-glightbox data-gallery="project-4">
+                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp28.jpg" alt="image">
               </a>
             </figure>
           </div>
           <!-- /column -->
           <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
             <figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
-              <a href="assets/img/photos/pp29%402x.jpg" data-glightbox data-gallery="project-4">
-                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp29.jpg" alt="image">
+              <a href="../assets/img/photos/pp29%402x.jpg" data-glightbox data-gallery="project-4">
+                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp29.jpg" alt="image">
               </a>
             </figure>
           </div>
           <!-- /column -->
           <div class="xl:w-8/12 lg:w-8/12 md:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
             <figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
-              <a href="assets/img/photos/pp30%402x.jpg" data-glightbox data-gallery="project-4">
-                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="assets/img/photos/pp30.jpg" alt="image">
+              <a href="../assets/img/photos/pp30%402x.jpg" data-glightbox data-gallery="project-4">
+                <img class=" transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="../assets/img/photos/pp30.jpg" alt="image">
               </a>
             </figure>
           </div>
@@ -699,7 +699,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -776,8 +776,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/public/html/terms.html b/public/html/terms.html
index b1e2ebe..90d657a 100644
--- a/public/html/terms.html
+++ b/public/html/terms.html
@@ -11,9 +11,9 @@
   <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
   <meta name="author" content="elemis">
   <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
-  <link rel="shortcut icon" href="assets/img/favicon.png">
-	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
-  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="shortcut icon" href="../assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="../assets/css/plugins.css">
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -24,7 +24,7 @@
         <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
           <div class="navbar-brand w-full">
             <a href='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
+              <img src="../assets/img/truncgil-yatay.svg" alt="image">
             </a>
           </div>
           <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -41,205 +41,205 @@
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo1.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 1</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo2.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 2</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo3.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 3</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo4.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 4</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo5.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 5</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo6.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 6</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo7.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 7</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo8.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 8</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo9.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 9</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo10.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 10</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo11.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 11</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo12.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 12</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo13.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 13</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo14.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 14</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo15.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 15</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo16.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 16</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo17.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 17</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo18.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 18</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo19.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 19</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo20.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 20</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo21.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 21</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo22.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 22</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo23.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 23</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo24.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 24</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo25.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 25</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo26.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 26</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo27.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 27</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo28.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 28</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo29.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 29</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo30.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 30</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo31.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 31</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo32.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 32</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo33.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 33</span>
                           </a>
                         </li>
                         <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
                           <a class='dropdown-item' href='demo34.html'>
-                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
                             <span class="xl:!hidden lg:!hidden">Demo 34</span>
                           </a>
                         </li>
@@ -353,87 +353,87 @@
                     <li class="mega-menu-content">
                       <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
                             <span>About</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
                             <span>Blog</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
                             <span>Call to Action</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
                             <span>Clients</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
                             <span>Contact</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
                             <span>Facts</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
                             <span>FAQ</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
                             <span>Features</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
                             <span>Footer</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
                             <span>Hero</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
                             <span>Misc</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
                             <span>Navbar</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
                             <span>Portfolio</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
                             <span>Pricing</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
                             <span>Process</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
                             <span>Team</span>
                           </a>
                         </li>
                         <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
                             <span>Testimonials</span>
                           </a>
                         </li>
@@ -700,7 +700,7 @@
       <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
         <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
           <div class="widget !text-[#cacaca]">
-            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
             <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
             <nav class="nav social social-white">
               <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
@@ -777,8 +777,8 @@
       <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
     </svg>
   </div>
-  <script src="assets/js/plugins.js"></script>
-  <script src="assets/js/theme.js"></script>
+  <script src="../assets/js/plugins.js"></script>
+  <script src="../assets/js/theme.js"></script>
 </body>
 
 
diff --git a/resources/views/components/front/footer.blade.php b/resources/views/components/front/footer.blade.php
deleted file mode 100644
index b660f3e..0000000
--- a/resources/views/components/front/footer.blade.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<footer class="bg-[rgba(255,255,255)] opacity-100">
-    <div class="container pt-8 xl:pt-10 lg:pt-10 md:pt-10 pb-7">
-        <div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-30px]">
-            <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[30px]">
-                <div class="widget">
-                    <img class="!mb-4" src="{{ asset('html/assets/img/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji">
-                    <p class="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">5000+ mutlu müşteri ile güvenilir teknoloji ortağınız.</p>
-                </div>
-            </div>
-            
-            <div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] xl:px-0 lg:px-0 !mt-[30px]">
-                <div class="widget">
-                    <div class="flex flex-row">
-                        <div>
-                            <div class="icon !text-[#e31e24] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-phone-volume before:content-['\ec50']"></i> </div>
-                        </div>
-                        <div>
-                            <h5 class="!mb-1">Telefon</h5>
-                            <p class="!mb-0">00 (123) 456 78 90 <br>00 (987) 654 32 10</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[30px]">
-                <div class="widget">
-                    <div class="flex flex-row">
-                        <div>
-                            <div class="icon !text-[#e31e24] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-location-pin-alt before:content-['\ebd8']"></i> </div>
-                        </div>
-                        <div class="!self-start !justify-start">
-                            <h5 class="!mb-1">Adres</h5>
-                            <address class=" not-italic !leading-[inherit] !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <hr class="!mt-13 xl:!mt-[4.5rem] lg:!mt-[4.5rem] md:!mt-[4.5rem] !mb-7">
-        
-        <div class="xl:!flex lg:!flex md:!flex items-center justify-between">
-            <p class="!mb-2 xl:!mb-0 lg:!mb-0">© 2025 Trunçgil Teknoloji. Tüm hakları saklıdır.</p>
-            <nav class="nav social social-muted  !mb-0  xl:!text-right lg:!text-right md:!text-right">
-                <a class="m-[0_0_0_.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
-                <a class="m-[0_0_0_.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
-                <a class="m-[0_0_0_.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
-                <a class="m-[0_0_0_.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] !text-[#d53581]"></i></a>
-                <a class="m-[0_0_0_.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] !text-[#c8312b]"></i></a>
-            </nav>
-        </div>
-    </div>
-</footer>
-
-
-
diff --git a/resources/views/components/front/header.blade.php b/resources/views/components/front/header.blade.php
deleted file mode 100644
index d961b9c..0000000
--- a/resources/views/components/front/header.blade.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<header class="relative wrapper !bg-[#f0f0f8]">
-    <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
-        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
-            <div class="navbar-brand w-full">
-                <a href='{{ url('/') }}'>
-                    <img src="{{ asset('html/assets/img/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji">
-                </a>
-            </div>
-            <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
-                <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
-                    <h3 class="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">Trunçgil</h3>
-                    <button type="button" class="btn-close btn-close-white mr-[-0.75rem] m-0 p-0" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-                </div>
-                <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
-                    
-                    <x-custom.menu />
-                    
-                    <div class="offcanvas-footer xl:!hidden lg:!hidden">
-                        <div>
-                            <a href="mailto:info@truncgil.com" class="link-inverse">info@truncgil.com</a>
-                            <br> 00 (123) 456 78 90 <br>
-                            <nav class="nav social social-white !mt-4">
-                                <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
-                                <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
-                                <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
-                                <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
-                                <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
-                            </nav>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="navbar-other w-full !flex !ml-auto">
-                <ul class="navbar-nav !flex-row !items-center !ml-auto">
-                    <li class="nav-item hidden xl:block lg:block md:block">
-                        <a href="#" class="btn btn-sm btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">Hemen Teklif Al</a>
-                    </li>
-                    <li class="nav-item xl:!hidden lg:!hidden">
-                        <button class="hamburger offcanvas-nav-btn"><span></span></button>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-</header>
-
-
-
diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
index 1c6db7f..80a847c 100644
--- a/resources/views/partials/footer.blade.php
+++ b/resources/views/partials/footer.blade.php
@@ -1,14 +1,77 @@
-<footer class="site-footer">
-	<div class="container">
-    	<p>{{ ($settings->site_name ?? config('app.name')) }} © {{ now()->year }}</p>
-    	<div class="social">
-			@php $links = $settings->social_links ?? []; @endphp
-			@if(!empty($links['facebook'])) <a href="{{ $links['facebook'] }}" rel="nofollow">Facebook</a> @endif
-			@if(!empty($links['instagram'])) <a href="{{ $links['instagram'] }}" rel="nofollow">Instagram</a> @endif
-			@if(!empty($links['linkedin'])) <a href="{{ $links['linkedin'] }}" rel="nofollow">LinkedIn</a> @endif
-			@if(!empty($links['twitter'])) <a href="{{ $links['twitter'] }}" rel="nofollow">X</a> @endif
+<footer class=" bg-[#21262c] opacity-100  !text-[#cacaca]">
+	<div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+	  <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+		<div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+		  <div class="widget !text-[#cacaca]">
+			<img class="!mb-4" src="../../assets/img/truncgil-yatay-dark.svg" alt="image">
+			<p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+			<nav class="nav social social-white">
+			  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+			  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+			  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+			  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+			  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+			</nav>
+			<!-- /.social -->
+		  </div>
+		  <!-- /.widget -->
 		</div>
+		<!-- /column -->
+		<div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+		  <div class="widget !text-[#cacaca]">
+			<h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+			<address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+			<a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00 (123) 456 78 90
+		  </div>
+		  <!-- /.widget -->
+		</div>
+		<!-- /column -->
+		<div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+		  <div class="widget !text-[#cacaca]">
+			<h4 class="widget-title !text-white !mb-3">Learn More</h4>
+			<ul class="pl-0 list-none   !mb-0">
+			  <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+			  <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+			  <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+			  <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+			  <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+			</ul>
+		  </div>
+		  <!-- /.widget -->
+		</div>
+		<!-- /column -->
+		<div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+		  <div class="widget !text-[#cacaca]">
+			<h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+			<p class="!mb-5">Subscribe to our newsletter to get our news &amp; deals delivered to you.</p>
+			<div class="newsletter-wrapper">
+			  <!-- Begin Mailchimp Signup Form -->
+			  <div id="mc_embed_signup">
+				<form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate="">
+				  <div id="mc_embed_signup_scroll">
+					<div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+					  <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL">
+					  <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL">Email Address</label>
+					  <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none border-0">
+					</div>
+					<div id="mce-responses" class="clear">
+					  <div class="response" id="mce-error-response" style="display:none"></div>
+					  <div class="response" id="mce-success-response" style="display:none"></div>
+					</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+					<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+					<div class="clear"></div>
+				  </div>
+				</form>
+			  </div>
+			  <!--End mc_embed_signup-->
+			</div>
+			<!-- /.newsletter-wrapper -->
+		  </div>
+		  <!-- /.widget -->
+		</div>
+		<!-- /column -->
+	  </div>
+	  <!--/.row -->
 	</div>
-</footer>
-
-
+	<!-- /.container -->
+  </footer>
\ No newline at end of file
diff --git a/resources/views/templates/home.blade.php b/resources/views/templates/home.blade.php
index d70189a..a91e013 100644
--- a/resources/views/templates/home.blade.php
+++ b/resources/views/templates/home.blade.php
@@ -1,5 +1,5 @@
 @extends('layouts.site')
-
+Ş
 @section('title', 'Anasayfa')
 
 @section('content')
@@ -36,8 +36,7 @@
 		<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] !text-center">
 		<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
 			<div class="md:!px-3 lg:!px-0 xl:!px-3">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.01 256" data-inject-url="{{ asset('assets/img/icons/solid/globe-2.svg') }}" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]"><path class="fill-secondary" d="M128.11 256h-.24a126.37 126.37 0 01-22-1.84 8 8 0 112.72-15.76A114.68 114.68 0 00128 240a8.06 8.06 0 018.07 8 8 8 0 01-7.94 8zm33.52-12.5a8 8 0 014.77-10.25 112.18 112.18 0 0017.66-8.25 8 8 0 018 13.85 128.36 128.36 0 01-20.19 9.46 8 8 0 01-10.26-4.79zm-97.5-4.56a128.83 128.83 0 01-18.27-12.78 8 8 0 1110.25-12.27 114.33 114.33 0 0016 11.2 8 8 0 11-8 13.85zm150.69-27.71a8 8 0 01-1-11.26A112.91 112.91 0 00225 184a8 8 0 0113.86 8 130.3 130.3 0 01-12.78 18.26 8 8 0 01-11.28 1zm-197.59-19A128.41 128.41 0 017.76 172a8 8 0 1115-5.49 112.8 112.8 0 008.29 17.67 8 8 0 11-13.84 8zM244.8 156.7a8 8 0 01-6.5-9.26A112.3 112.3 0 00240 128a8.23 8.23 0 018-8.26 7.81 7.81 0 018 8.76 124.89 124.89 0 01-1.92 21.72 8 8 0 01-9.26 6.48zM8 136.13a7.89 7.89 0 01-8-7.87s.61-15 1.86-22.18a8 8 0 1115.76 2.7A114.47 114.47 0 0016 128a8.09 8.09 0 01-8 8.13zm225.1-46.88a110.41 110.41 0 00-8.32-17.63 8 8 0 0113.83-8.08 129 129 0 019.52 20.17 8 8 0 01-15 5.54zM19.9 75.18A8 8 0 0117 64.26 126.41 126.41 0 0129.73 46 8 8 0 1142 56.21a112.72 112.72 0 00-11.17 16 8 8 0 01-10.93 3zm179.76-33.24a113.17 113.17 0 00-16-11.16 8 8 0 117.95-13.87 127.39 127.39 0 0118.3 12.75 8 8 0 01-10.24 12.28zM60.78 28.26a8 8 0 012.88-11 128 128 0 0120.18-9.44 8 8 0 115.52 15 112.17 112.17 0 00-17.63 8.31 8 8 0 01-11-2.88zm86.29-10.64A112.4 112.4 0 00128 16a8.17 8.17 0 01-8.19-8 7.84 7.84 0 017.81-8h.38a127.72 127.72 0 0121.8 1.86 8 8 0 01-2.71 15.76z"></path><path class="fill-primary" d="M128 32a96 96 0 1096 96 96.11 96.11 0 00-96-96zm62.61 145.66a103 103 0 00-14.49-7.76 160.22 160.22 0 005-33.9h26.48a79.47 79.47 0 01-17.01 41.66zM48.4 136h26.48a161.6 161.6 0 005 33.9 104.11 104.11 0 00-14.5 7.76A79.47 79.47 0 0148.4 136zm17-57.66a103.14 103.14 0 0014.5 7.76 160.2 160.2 0 00-5 33.9H48.4a79.47 79.47 0 0117-41.66zM120 79.7a106.49 106.49 0 01-20-3.43c5.41-13 12.6-22.11 20-26zm0 16V120H90.86A145.12 145.12 0 0195 91.49a122.72 122.72 0 0025 4.21zm0 40.3v24.3a121.26 121.26 0 00-25 4.23A144.37 144.37 0 0190.86 136H120zm0 40.3v29.48c-7.4-3.94-14.59-13-20-26a104.12 104.12 0 0120-3.44zm16 0a106.21 106.21 0 0120 3.43c-5.4 13-12.59 22.11-20 26zm0-16V136h29.1a144.37 144.37 0 01-4.16 28.51 122.49 122.49 0 00-25-4.21zm0-40.3V95.7a121.14 121.14 0 0025-4.23 142.91 142.91 0 014.1 28.53H136zm0-40.3V50.24c7.41 3.94 14.6 13 20 26a104.36 104.36 0 01-20 3.46zm27.94-23.08a80.19 80.19 0 0115.25 10 88.15 88.15 0 01-8.19 4.21 98.1 98.1 0 00-7.12-14.21zm-79 14.21a86.72 86.72 0 01-8.12-4.25 80.12 80.12 0 0115.24-10 95.14 95.14 0 00-7.12 14.25zm0 114.34a98.11 98.11 0 007.12 14.21 80.12 80.12 0 01-15.24-10 86.72 86.72 0 018.12-4.21zm86.1 0a88.15 88.15 0 018.13 4.25 80.19 80.19 0 01-15.25 10 99.14 99.14 0 007.08-14.25zM181.1 120a161 161 0 00-5-33.9 104.57 104.57 0 0014.49-7.76 79.47 79.47 0 0117 41.66z"></path></svg>
-			<h4>{!! t('Yapay Zeka') !!}</h4>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-inject-url="{{ asset('assets/img/icons/solid/cloud-download.svg') }}" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]"><g data-name="Layer 2"><g data-name="Layer 1"><path class="fill-secondary" d="M229 204.06a25.63 25.63 0 00-13.31 3.8l-42.34-29.32V128a10.67 10.67 0 00-21.35 0v56.11a10.63 10.63 0 004.59 8.77l46.9 32.48A26.59 26.59 0 00203 230a26 26 0 1026-26zm0 30.61a4.64 4.64 0 114.64-4.64 4.64 4.64 0 01-4.64 4.64zm-90.33-28.25V128a10.67 10.67 0 10-21.34 0v78.42a26 26 0 1021.34 0zM128 234.67a4.64 4.64 0 114.64-4.64 4.64 4.64 0 01-4.64 4.64z"></path><path class="fill-primary" d="M49.84 172.21l14.1-.18 2.73-1.89V128a26.71 26.71 0 0126.67-26.67 26.41 26.41 0 0117.33 6.57 26.14 26.14 0 0134.66 0 26.53 26.53 0 0144 20.1v42.14l.56.39 16.46-.19a8.5 8.5 0 002.08-.31 65.34 65.34 0 00-9.23-127.65A81 81 0 0049.07 62.91 55.07 55.07 0 000 117.57c0 28.03 21 51.5 49.84 54.64z"></path><path class="fill-secondary" d="M104 128a10.67 10.67 0 10-21.33 0v50.53l-42.33 29.31A25.91 25.91 0 1053 230a25.68 25.68 0 00-.48-4.67l46.89-32.48a10.63 10.63 0 004.59-8.77V128zM27 234.67a4.64 4.64 0 114.65-4.67 4.64 4.64 0 01-4.65 4.67z"></path></g></g></svg>			<h4>{!! t('Yapay Zeka') !!}</h4>
 			<p class="!mb-2">{!! t('Yapay zeka teknolojilerini kullanarak işlerinizi otomatikleştirebiliriz.') !!}</p>
 			<a href="#" class="more hover !text-[#e31e24]">{!! t('Daha fazla bilgi edin') !!}</a>
 			</div>
@@ -54,7 +53,7 @@
 		<!--/column -->
 		<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
 			<div class="md:!px-3 lg:!px-0 xl:!px-3">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 401.13 512" data-inject-url="{{ asset('assets/img/icons/lineal/music.svg') }}" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]"><path class="fill-secondary" d="M93.28 450.16a14 14 0 01-14-14V107.49A14 14 0 0189 94.15L382.89.66A14 14 0 01401.13 14v356.66a14 14 0 11-28 0V33.13l-265.85 84.59v318.45a14 14 0 01-14 13.99z"></path><path class="lineal-fill" d="M93.28 107.49v111.62l293.85-93.49V13.99l-293.85 93.5z"></path><path class="lineal-stroke" d="M93.28 233.1a14 14 0 01-14-14V107.49A14 14 0 0189 94.15L382.89.66A14 14 0 01401.13 14v111.62a14 14 0 01-9.76 13.38L97.53 232.44a13.76 13.76 0 01-4.25.66zm14-115.38V200l265.86-84.59V33.13zm42.44 323.15a14 14 0 01-14-14V262.23a14 14 0 0128 0v164.65a14 14 0 01-14 13.99zm180.97-124.4a14 14 0 01-14-14V192.26a14 14 0 0128 0v110.22a14 14 0 01-14 13.99z"></path><circle class="lineal-fill" cx="81.86" cy="430.14" r="67.87"></circle><path class="lineal-stroke" d="M81.86 512a81.86 81.86 0 1181.86-81.86A81.95 81.95 0 0181.86 512zm0-135.73a53.87 53.87 0 1053.87 53.87 53.93 53.93 0 00-53.87-53.87zm237.41 75.56a81.86 81.86 0 110-163.71 83.43 83.43 0 0113.23 1.06 14 14 0 01-4.5 27.63A53.88 53.88 0 10373.14 370a14 14 0 1128 0 81.94 81.94 0 01-81.87 81.83z"></path></svg>			
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 401.13 512" data-inject-url="{{ asset('assets/img/icons/lineal/music.svg') }}" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-red !mb-5 m-[0_auto]"><path class="fill-secondary" d="M93.28 450.16a14 14 0 01-14-14V107.49A14 14 0 0189 94.15L382.89.66A14 14 0 01401.13 14v356.66a14 14 0 11-28 0V33.13l-265.85 84.59v318.45a14 14 0 01-14 13.99z"></path><path class="lineal-fill" d="M93.28 107.49v111.62l293.85-93.49V13.99l-293.85 93.5z"></path><path class="lineal-stroke" d="M93.28 233.1a14 14 0 01-14-14V107.49A14 14 0 0189 94.15L382.89.66A14 14 0 01401.13 14v111.62a14 14 0 01-9.76 13.38L97.53 232.44a13.76 13.76 0 01-4.25.66zm14-115.38V200l265.86-84.59V33.13zm42.44 323.15a14 14 0 01-14-14V262.23a14 14 0 0128 0v164.65a14 14 0 01-14 13.99zm180.97-124.4a14 14 0 01-14-14V192.26a14 14 0 0128 0v110.22a14 14 0 01-14 13.99z"></path><circle class="lineal-fill" cx="81.86" cy="430.14" r="67.87"></circle><path class="lineal-stroke" d="M81.86 512a81.86 81.86 0 1181.86-81.86A81.95 81.95 0 0181.86 512zm0-135.73a53.87 53.87 0 1053.87 53.87 53.93 53.93 0 00-53.87-53.87zm237.41 75.56a81.86 81.86 0 110-163.71 83.43 83.43 0 0113.23 1.06 14 14 0 01-4.5 27.63A53.88 53.88 0 10373.14 370a14 14 0 1128 0 81.94 81.94 0 01-81.87 81.83z"></path></svg>			
 				<h4>{!! t('Müzik Prodüksiyon') !!}</h4>
 			<p class="!mb-2">{!! t('Müzik prodüksiyonu, film müzikleri, kurumsal müzik çalışmaları ve benzeri alanlarda hizmet veriyoruz.') !!}</p>
 			<a href="#" class="more hover !text-[#e31e24]">{!! t('Daha fazla bilgi edin') !!}</a>
diff --git a/resources/views/templates/iletisim.blade.php b/resources/views/templates/iletisim.blade.php
new file mode 100644
index 0000000..fd7bc36
--- /dev/null
+++ b/resources/views/templates/iletisim.blade.php
@@ -0,0 +1,196 @@
+@extends('layouts.site')
+
+@section('title', 'Anasayfa')
+
+@section('content')
+<div class="grow shrink-0">
+    
+    <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="../assets/img/photos/bg3.jpg" style="background-image: url(&quot;../assets/img/photos/bg3.jpg&quot;);">
+      <div class="container pt-28 pb-40 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem] !text-center">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3 !text-white">Get in Touch</h1>
+            <nav class="inline-block" aria-label="breadcrumb">
+              <ol class="breadcrumb  flex flex-wrap bg-[none] p-0 !rounded-none list-none !mb-[20px]">
+                <li class="breadcrumb-item flex !text-[#60697b]"><a class="!text-white hover:text-white" href="#">Home</a></li>
+                <li class="breadcrumb-item flex !text-white !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(255,255,255,.5)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons active" aria-current="page">Contact</li>
+              </ol>
+            </nav>
+            <!-- /nav -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]   relative border-0 upper-end before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#fefefe] before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-0 before:border-solid before:right-0">
+      <div class="container pb-12">
+        <div class="flex flex-wrap mx-[-15px] !mb-[4.5rem] md:!mb-24">
+          <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[-9rem]">
+            <div class="card">
+              <div class="flex flex-wrap mx-0">
+                <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !self-stretch">
+                  <div class="map map-full rounded-t-[0.4rem] rounded-lg-start h-full min-h-[15rem]">
+                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3185.260084530038!2d37.3074315!3d37.027444599999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1531df5596352d25%3A0xdf86e451c6ee688a!2zVHJ1bsOnZ2ls!5e0!3m2!1str!2str!4v1767207015943!5m2!1str!2str" style="width:100%; height: 100%; border:0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+                  </div>
+                  <!-- /.map -->
+                </div>
+                <!--/column -->
+                <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
+                  <div class="p-10 xl:!p-[4.5rem] lg:!p-[4.5rem] md:!p-12">
+                    <div class="flex flex-row">
+                      <div>
+                        <div class="icon !text-[#3f78e0] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-location-pin-alt before:content-['\ebd8']"></i> </div>
+                      </div>
+                      <div class="!self-start !justify-start">
+                        <h5 class="!mb-1">{{ t('Adres') }}</h5>
+                        <address class=" not-italic !leading-[inherit] !mb-4">{{ setting('contact_address') }}</address>
+                      </div>
+                    </div>
+                    <!--/div -->
+                    <div class="flex flex-row">
+                      <div>
+                        <div class="icon !text-[#3f78e0] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-phone-volume before:content-['\ec50']"></i> </div>
+                      </div>
+                      <div>
+                        <h5 class="!mb-1">{{ t('Telefon') }}</h5>
+                        <p>{{ setting('contact_phone') }}</p>
+                      </div>
+                    </div>
+                    <!--/div -->
+                    <div class="flex flex-row">
+                      <div>
+                        <div class="icon !text-[#3f78e0] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-envelope before:content-['\eac8']"></i> </div>
+                      </div>
+                      <div>
+                        <h5 class="!mb-1">{{ t('E-posta') }}</h5>
+                        <p class="!mb-0"><a href="mailto:{{ setting('contact_email') }}" class="!text-[#60697b]">{{ setting('contact_email') }}</a></p>
+                      </div>
+                    </div>
+                    <!--/div -->
+                  </div>
+                  <!--/div -->
+                </div>
+                <!--/column -->
+              </div>
+              <!--/.row -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="xl:w-8/12 xl:!ml-[16.66666667%] lg:w-10/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full">
+            <h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 !text-center">{{ t('Bize Ulaşın') }}</h2>
+            <p class="lead !leading-[1.65] text-[0.9rem] font-medium !text-center !mb-10">{{ t('Bize ulaşmak için lütfen aşağıdaki formu doldurunuz veya bizimle iletişime geçin.') }}</p>
+            <form class="contact-form needs-validation" method="post" action="https://Trunçgil-tailwind-template.netlify.app/assets/php/contact.php" novalidate="">
+              <div class="messages"></div>
+              <div class="flex flex-wrap mx-[-10px]">
+                <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
+                  <div class="form-floating relative !mb-4">
+                    <input id="form_name" type="text" name="name" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" required="">
+                    <label for="form_name" class="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">{{ t('Adınız') }} *</label>
+                    <div class="valid-feedback"> Looks good! </div>
+                    <div class="invalid-feedback"> {{ t('Lütfen adınızı giriniz.') }} </div>
+                  </div>
+                </div>
+                <!-- /column -->
+                <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
+                  <div class="form-floating relative !mb-4">
+                    <input id="form_lastname" type="text" name="surname" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" required="">
+                    <label for="form_lastname" class="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">{{ t('Soyadınız') }} *</label>
+                    <div class="valid-feedback"> Looks good! </div>
+                    <div class="invalid-feedback"> {{ t('Lütfen soyadınızı giriniz.') }} </div>
+                  </div>
+                </div>
+                <!-- /column -->
+                <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
+                  <div class="form-floating relative !mb-4">
+                    <input id="form_email" type="email" name="email" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" required="">
+                        <label for="form_email" class="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">{{ t('E-posta') }} *</label>
+                    <div class="valid-feedback"> Looks good! </div>
+                    <div class="invalid-feedback"> {{ t('Lütfen geçerli bir e-posta adresi giriniz.') }} </div>
+                  </div>
+                </div>
+                <!-- /column -->
+                <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
+                  <div class="form-select-wrapper !mb-4">
+                    <select class="form-select" id="form-select" name="department" required="">
+                      <option selected="" disabled="" value="">{{ t('Departman Seçiniz') }}</option>
+                      <option value="Sales">{{ t('Satış') }}</option>
+                      <option value="Marketing">{{ t('Teknik Destek') }}</option>
+                      <option value="Customer Support">{{ t('Muhasebe') }}</option>
+                    </select>
+                    <div class="valid-feedback"> Looks good! </div>
+                    <div class="invalid-feedback"> {{ t('Lütfen bir departman seçiniz.') }} </div>
+                  </div>
+                </div>
+                <!-- /column -->
+                <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
+                  <div class="form-floating relative !mb-4">
+                    <textarea id="form_message" name="message" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" style="height: 150px" required=""></textarea>
+                    <label for="form_message" class="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">{{ t('Mesajınız') }} *</label>
+                    <div class="valid-feedback"> Looks good! </div>
+                    <div class="invalid-feedback"> {{ t('Lütfen mesajınızı giriniz.') }} </div>
+                  </div>
+                </div>
+                <!-- /column -->
+                <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center">
+                  <input type="submit" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-send !mb-3 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" value="{{ t('Mesaj Gönder') }}">
+                  <p class="!text-[#aab0bc]"><strong>*</strong> {{ t('Bu alanlar zorunludur.') }}</p>
+                </div>
+                <!-- /column -->
+              </div>
+              <!-- /.row -->
+            </form>
+            <!-- /form -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-[0]" data-image-src="../assets/img/map.png" style="background-image: url(&quot;../assets/img/map.png&quot;);">
+      <div class="container pt-0 pb-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 xl:pb-32 lg:pb-32 md:pb-32">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="lg:w-9/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-8 xl:!px-14">{{ t('600+ müşterimize güveniyoruz. Şimdi onlarla birlikte işinizi büyütün.') }}</h3>
+          </div>
+          <!-- /.row -->
+        </div>
+        <!-- /column -->
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="md:w-10/12 lg:w-9/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-20px] xl:!mt-0 lg:!mt-0 md:!mt-0">
+              <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[20px] xl:!mt-0 lg:!mt-0 md:!mt-0">
+                <h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2 xl:!text-[2.2rem]  !text-[#3f78e0]" style="visibility: visible;">126</h3>
+                <p class=" text-[0.8rem] font-medium !mb-0">{{ t('Tamamlanan Projeler') }}</p>
+              </div>
+              <!--/column -->
+              <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[20px] xl:!mt-0 lg:!mt-0 md:!mt-0">
+                <h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2 xl:!text-[2.2rem]  !text-[#3f78e0]" style="visibility: visible;">600+</h3>
+                <p class=" text-[0.8rem] font-medium !mb-0">{{ t('Memnuniyetli Müşteriler') }}</p>
+              </div>
+              <!--/column -->
+              <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[20px] xl:!mt-0 lg:!mt-0 md:!mt-0">
+                <h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2 xl:!text-[2.2rem]  !text-[#3f78e0]" style="visibility: visible;">10+</h3>
+                <p class=" text-[0.8rem] font-medium !mb-0">{{ t('Uzman Çalışanlar') }}</p>
+              </div>
+              <!--/column -->
+            </div>
+            <!--/.row -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+  </div>
+@endsection