Merge remote-tracking branch 'Muriwolf/swapee' into swapee

11 files changed, 339 insertions, 511 deletions

diff --git a/src/app.css b/src/app.css
index bcd5421c..593b9470 100644
--- a/src/app.css
+++ b/src/app.css
@@ -95,6 +95,10 @@ html {
   font-family: 'Inter', sans-serif;
 }
 
+.f_bebas_neue{
+  font-family: 'Bebas Neue', sans-serif;
+}
+
 :root {
   --purple: #7105f3;
   --slate_blue: #7f8a9d;
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 42536e62..147ba834 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -48,7 +48,7 @@
       {#if user}
         <a href={`/${user.username}`}>
           <button
-            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:!bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
@@ -57,7 +57,7 @@
         </a>
         <a href={`/${user.username}/buy`}>
           <button
-            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:!bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}/buy`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
@@ -66,7 +66,7 @@
         </a>
         <a href={`/${user.username}/receive`}>
           <button
-            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:!bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}/receive`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
@@ -75,7 +75,7 @@
         </a>
         <a href={`/${user.username}/payments`}>
           <button
-            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:!bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}/payments`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'} relative"
@@ -96,7 +96,7 @@
         </a>
         <a href={`/send`}>
           <button
-            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:!bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/send`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
@@ -106,7 +106,7 @@
         <div class="relative">
           <OutClick on:outclick={() => (showMenu = false)}>
             <button
-              class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+              class="bg-white dark:!bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
                 .url.pathname === `/${user.username}` ||
               $page.url.pathname === `/${user.username}/settings` ||
               $page.url.pathname === `/support`
@@ -121,7 +121,7 @@
             <div
               class="{showMenu
                 ? 'block'
-                : 'hidden'} absolute top-14 right-0 bg-white dark:bg-black dark:border-2 dark:border-gray-50 rounded-3xl p-8 shadow-xl z-50"
+                : 'hidden'} absolute top-14 right-0 bg-white dark:!bg-black dark:border-2 dark:border-gray-50 rounded-3xl p-8 shadow-xl z-50"
             >
               <ul class="space-y-5 w-48">
                 {#each menuButtons as { href, icon, key }}
@@ -145,7 +145,7 @@
         </div>
       {:else}
         <a href={`/login?redirect=${$page.url.pathname}`}>
-          <button class="bg-white dark:bg-black px-5 py-2 rounded-xl font-semibold text-sm"
+          <button class="bg-white dark:!bg-black px-5 py-2 rounded-xl font-semibold text-sm"
             >{$t("nav.signIn")}</button
           >
         </a>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 12977900..bfeac41a 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,7 +1,10 @@
 <script>
-  import Icon from "$comp/Icon.svelte";
-  import LocaleSelector from "$comp/LocaleSelector.svelte";
-  import { t } from "$lib/translations";
+	import Icon from "$comp/Icon.svelte";
+	import LocaleSelector from "$comp/LocaleSelector.svelte";
+	import { t } from "$lib/translations";
+
+	const date = new Date()
+	const currentYear = date.getFullYear()
 
 	const followLinks = [
 		{ url: 'https://twitter.com/swapeewallet', titleID: 'twitter' },
@@ -9,53 +12,49 @@
 		{ url: 'https://linktr.ee/swapee.me', titleID: 'linktree' }
 	];
 
-  const companyLinks = [
-    { url: "/docs", titleID: "documentation" },
-    { url: "/support", titleID: "support" },
-  ];
+	const companyLinks = [
+		{ url: "/docs", titleID: "documentation" },
+		{ url: "/support", titleID: "support" },
+	];
 </script>
 <footer class="pt-16 bg-black">
 	<div class="max-w-[1296px] mx-auto px-8">
-		<!-- footer_top -->
-		<div class="footer_top pb-4">
+		<div class="footer_top border-b-[1] border-gray-800 pb-4">
 			<div class="flex-col md:flex-row flex md:items-center justify-between">
 				<div class="flex-1 mb-12 sm:mb-5">
-					<a href="#" class="footer_logo"><img src="images/footer-logo.png" alt="" /></a>
-					<p class="text-gray-200 mt-10">Copyright © 2023. Swapee.me</p>
+					<a href="#" ><img src="images/footer-logo.png" alt="swapee logo" class="max-w-36" /></a>
+					<p class="text-gray-200 mt-10">Copyright © {currentYear ?? 2024}. Swapee.me</p>
 					<p class="text-gray-200 mt-3">All rights reserved.</p>
 					<a href="#" class="btn_language inline-block mt-6 font-bold !text-white hover:!text-black">English</a>
 				</div>
-				<div
-					class="flex-1 footer_top_right flex items-center justify-start md:justify-center "
-				>
+				<div class="flex-1 flex items-center justify-start md:justify-center">
 					<div class="flex max-sm:flex-col md:justify-end gap-x-6">
 						<div class="flex-1 xl:mb-0 mb-4 md:pr-0 sm:pr-5">
 							<h6 class="!text-white/80 mb-0">Business enquiries</h6>
-							<a href="mailto:[email protected]">[email protected]</a>
+							<a href="mailto:[email protected]" class="text-swapee-purple hover:underline">[email protected]</a>
 						</div>
 						<div class="flex-1 xs:pr-5 mb-4 md:pr-0 sm:pr-5">
 							<h6 class="!text-white/80 mb-0">Support enquiries</h6>
-							<a href="mailto:[email protected]">[email protected]</a>
+							<a href="mailto:[email protected]" class="text-swapee-purple hover:underline">[email protected]</a>
 						</div>
 					</div>
 				</div>
 			</div>
 
-			<!-- footer_bottom -->
-			<div class="footer_bottom pt-4 pb-2">
-				<ul class="list-unstyled mb-0 ps-0">
-					<li class="pb-3 ">
-						<a href="/docs" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Documentation</a>
+			<div class="footer_bottom flex justify-end pt-4 pb-2">
+				<ul class="flex flex-wrap justify-center mb-0 ps-0">
+					<li class="pb-3 ml-[0.9375rem]">
+						<a href="/docs" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold py-[6px] px-[10px]">Documentation</a>
+					</li>
+					<li class="pb-3 ml-[0.9375rem]">
+						<a href="/privacy" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold py-[6px] px-[10px]">Privacy Policy</a>
 					</li>
-					<li class="pb-3">
-						<a href="/privacy" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Privacy Policy</a>
+          			<li class="pb-3 ml-[0.9375rem]">
+						<a href="/support" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold py-[6px] px-[10px]">Support</a>
 					</li>
-          <li class="pb-3">
-						<a href="/support" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Support</a>
+					<li class="pb-3 ml-[0.9375rem]">
+						<a href="/sitemap" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold py-[6px] px-[10px]">Sitemap</a>
 					</li>
-					<li class="pb-3">
-								  <a href="/sitemap" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Sitemap</a>
-							  </li>
 				</ul>
 			</div>
 		</div>
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 2bf79a50..5bf8280b 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -164,7 +164,7 @@
         {#if following}
           <div class="w-full flex">
             <button
-              class="mx-auto rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
+              class="mx-auto rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
               on:click={unfollow}
             >
               <div class="mx-auto flex">
@@ -176,7 +176,7 @@
         {:else}
           <div class="w-full flex">
             <button
-              class="mx-auto rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
+              class="mx-auto rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex w-60"
               on:click={follow}
             >
               <div class="mx-auto flex">
@@ -192,7 +192,7 @@
         <div class="w-full flex">
           <a href={`/${subject.username}/messages`} class="mx-auto">
             <button
-              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
+              class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex w-60"
             >
               <div class="mx-auto flex">
                 <Icon icon="message" style="mr-2 my-auto" />
@@ -212,7 +212,7 @@
             class="mx-auto"
           >
             <button
-              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
+              class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex w-60"
             >
               <div class="mx-auto flex">
                 <Icon icon="send" style="mr-2" />
@@ -228,7 +228,7 @@
           <input placeholder="Password reset" bind:value={password} />
           <button
             type="submit"
-            class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
+            class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex w-60"
           >
             <div class="mx-auto flex">
               <Icon icon="clock" style="mr-2 my-auto w-8" />
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 2812100c..6ca59e8a 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -94,7 +94,7 @@
         >
           <a href={`/send`} class="w-full md:w-40">
             <button
-              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full "
+              class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full "
             >
               <div class="mx-auto my-auto flex">
                 <Icon icon="send" style="my-auto h-6 mr-2 text-red-300 dark:invert" />
@@ -105,7 +105,7 @@
 
           <a href={`/${user.username}/receive`} class="w-full md:w-40 my-auto">
             <button
-              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
+              class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
             >
               <div class="mx-auto flex">
                 <Icon icon="numpad" style="my-auto h-6 mr-2 dark:invert" />
@@ -116,7 +116,7 @@
 
           <a href={`/buy`} class="w-full md:w-52">
             <button
-              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
+              class="rounded-full border dark:border-white py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
             >
               <div class="mx-auto flex">
                 <!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
diff --git a/src/routes/(app)/[username]/+layout.svelte b/src/routes/(app)/[username]/+layout.svelte
index dd29e3aa..4d6faccd 100644
--- a/src/routes/(app)/[username]/+layout.svelte
+++ b/src/routes/(app)/[username]/+layout.svelte
@@ -54,4 +54,4 @@
     animation: 280ms cubic-bezier(0, 0, 0.2, 1) 80ms both fade-in,
       180ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index 68b5e05f..f20a8d89 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -110,7 +110,7 @@
 <a href="./shopify">
   <button
     type="button"
-    class="flex rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full gap-2 my-5 justify-center"
+    class="flex rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full gap-2 my-5 justify-center dark:border-white"
   >
     <img src="/icons/shopify.svg" alt="" class="w-8" />
     <div class="my-auto">Shopify Integration</div>
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 96df35ad..2622feed 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -109,10 +109,26 @@
         {$t("user.send.contacts")}
       </h1>
       <div>
+        <!-- <a href={`/send/$aaaa`}>
+          <div
+            class="border-b p-2 last:border-b-0 hover:bg-gray-200 dark:hover:bg-swapee-purple transition-all duration-200 ease-out rounded-2xl hover:ring-1 ring-swapee-purple"
+          >
+            <div class="flex">
+              <div>
+                <div class="flex">
+                  <Avatar  size={20} disabled={true} />
+                  <div class="my-auto text-left">
+                    <p class="ml-1 text-lg break-words">aaa aasa</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </a> -->         
         {#each contacts as c}
           <a href={`/send/${c.username}`}>
             <div
-              class="border-b p-2 last:border-b-0 hover:bg-gray-100 rounded-2xl"
+            class="border-b p-2 last:border-b-0 hover:bg-gray-200 dark:hover:bg-stone-800 transition-all duration-200 ease-out rounded-2xl"
             >
               <div class="flex">
                 <div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e14911c9..3354e8c5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
   import { PUBLIC_DOMAIN } from "$env/static/public";
   import "../app.css";
   import "../swapee/css/animation.css";
+ 
   import { loading, t } from "$lib/translations";
 
   export let data;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 61f09290..a71a4d49 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { slide } from 'svelte/transition';
 	import { gsap } from "gsap";
     import { enhance } from "$app/forms";
 	import * as Accordion from "$lib/shadcn/components/ui/accordion";
@@ -27,8 +28,9 @@
 	let toggleThemeForm;
 	let homeNav;
 	let homeNavActiveLeft = 32;
-	let homeNavActiveTranslate = 0;
+	let homeNavActiveTranslate = 102.46875;
 	let NavHowItWorksEl;
+	let showAlert = true;
 
 	function toggleThemeSelected() {
 		themeSelected = themeSelected === "light" ? "dark" : "light"; 
@@ -61,26 +63,33 @@
 </script>
 
 <!-- aleart -->
-<div
-	class="top_alert position-relative alert bg_purple mb-0 alert-dismissible fade show border_radius_0"
-	role="alert"
->
-	<p class="text-center mb-0 text-white fw-semibold">
-		It's important not to forget your <span class="txt_yellow">username</span> and
-		<span class="txt_yellow">password</span> since we don't have access to those details.
-	</p>
-	<button
-		type="button"
-		class="bg-transparent border-0 shadow-none"
-		data-bs-dismiss="alert"
-		aria-label="Close"><img src="images/cross-icon.png" alt="" /></button
+
+{#if showAlert}
+	<div
+		class="relative bg-swapee-purple mb-0 flex gap-x-2 p-4 border-b-2 border-black"
+		role="alert"
+		transition:slide={{duration: 125}}
 	>
-</div>
+		<p class="text-center mb-0 text-white fw-semibold w-full font-semibold">
+		It's important not to forget your <span class="text-yellow">username</span> and
+		<span class="text-yellow">password</span> since we don't have access to those details.
+		</p>
+		<button
+			type="button"
+			class="bg-transparent border-0 shadow-none"
+			data-bs-dismiss="alert"
+			aria-label="Close"
+			on:click={() => showAlert = false}
+		>
+			<img src="images/cross-icon.png" alt="" />
+		</button>
+	</div>
+{/if}
 
 <!-- nav -->
-<nav class="navbar navbar-expand-lg dark:bg-black py-3 ">
-	<div class="container-xxl px-lg-5 px-sm-4 px-3">	
-		<a class="navbar-brand site_logo max-lg:ml-1" href="/">
+<nav class="relative flex flex-wrap items-center content-between py-3 px-4 dark:bg-black ">
+	<div class="container mx-auto px-lg-5 sm:px-6 px-0 flex justify-between">	
+		<a class="inline-block pt-1 pb-1 mr-4 text-lg whitespace-no-wrap site_logo max-lg:ml-1 max-w-36" href="/">
 			{#if data.colorThemeSelected == "light"}
 				<img src="images/logo.png" alt="" />
 			{:else}
@@ -123,7 +132,7 @@
 				</form>
 			</Sheet.Content>
 		</Sheet.Root>
-		<div class="hidden lg:flex justify-between items-center !border-r-2 !border-r-white">
+		<div class="opacity-0 flex absolute max-lg:left-0 max-lg:-translate-x-full lg:static lg:opacity-100 justify-between items-center">
 			<ul class="flex gap-x-8 relative text-center mx-auto mb-2 dark:text-white uppercase font-semibold" bind:this={homeNav}>
 				<li class="">
 					<a class="text-black dark:!text-white no-underline" href="/" bind:this={NavHowItWorksEl} on:click={(e) => {defineHomeNavActive(e.target)}}>How it works</a>
@@ -161,20 +170,20 @@
 </nav>
 
 <!-- hero -->
-<div class="site_hero pt-md-5 pt-4 dark:bg-black">
-	<div class="container-lg px-sm-4 px-3 pt-md-5 mb-16  text-center">
+<div class="site_hero md:pt-12 pt-4 dark:bg-black">
+	<div class="container sm:px-6 px-3 md:pt-12 mb-16 text-center">
 		<h1
-			class="text-center dark:text-white f_bebas_neue text-uppercase fw-bold letter_space_2 display-3 lh-1"
+			class="text-center dark:text-white f_bebas_neue text-uppercase font-bold text-5xl sm:text-6xl md:text-7xl text-stone-950 lh-1"
 		>
 			The easiest way to get <br />
 			started with bitcoin.
 		</h1>
-		<p class="text-center txt_slate_blue dark:!text-gray-200 mb-4">
+		<p class="text-center text-stone-600 font-medium dark:!text-gray-200 mb-4">
 			A simple but powerful web wallet for everyone. *No software or hardware required.*
 		</p>
 		<a href="/register" class="btn_purple"><span class="px-5">Start in Seconds</span></a>
 	</div>
-	<div class="container-xxl px-lg-5 px-sm-4 px-3">
+	<div class="container px-lg-5 sm:px-6 px-3">
 		<div class="w-100">
 			<img src="images/hero_bg.png" alt="" class="w-full slide-top" />
 		</div>
@@ -182,36 +191,36 @@
 </div>
 
 <!-- first grid -->
-<section class="py-4 dark:bg-black">
-	<div class="container-lg px-sm-4 px-3">
-		<div class="row justify-content-center">
-			<div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
-				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
-					<img src="images/swapee-grid-1-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
-					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">Create your account</h5>
-					<p class="txt_slate_blue dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
+<section class="py-8 px-1 dark:bg-black">
+	<div class="container sm:px-6 px-3">
+		<div class="flex flex-wrap justify-center ">
+			<div class="lg:w-1/3 md:w-1/2 lg:mb-0 mb-4">
+				<div class="h-full text-center md:w-4/5 mx-auto">
+					<img src="images/swapee-grid-1-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out max-h-[230px]" height="230" alt="" />
+					<h5 class="f_bebas_neue font-bold dark:text-white">Create your account</h5>
+					<p class="text-stone-600 dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
 						A username and password is all you need to get started. <a
 							href="/"
-							class="swapee_grid_link dark:!text-gray-200">Don’t forget it!</a
+							class="underline font-medium dark:!text-gray-200">Don’t forget it!</a
 						>
 					</p>
 				</div>
 				
 			</div>
-			<div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
-				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
-					<img src="images/swapee-grid-2-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
-					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">Ask for payments</h5>
-					<p class="txt_slate_blue dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
+			<div class="lg:w-1/3 md:w-1/2 lg:mb-0 mb-4">
+				<div class="h-full text-center md:w-4/5 mx-auto">
+					<img src="images/swapee-grid-2-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out max-h-[230px]" height="230" alt="" />
+					<h5 class="f_bebas_neue font-bold dark:text-white">Ask for payments</h5>
+					<p class="text-stone-600 dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
 						It’s the same as you normally would traditionally, but with bitcoin.
 					</p>
 				</div>
 			</div>
-			<div class="col-lg-4 col-md-6">
-				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
-					<img src="images/swapee-grid-3-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
-					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">That's all!</h5>
-					<p class="txt_slate_blue dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
+			<div class="lg:w-1/3 md:w-1/2">
+				<div class="h-full text-center md:w-4/5 mx-auto">
+					<img src="images/swapee-grid-3-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out max-h-[230px]" height="230" alt="" />
+					<h5 class="f_bebas_neue font-bold dark:text-white">That's all!</h5>
+					<p class="text-stone-600 dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
 						Spend your coins immediately or save it and watch it grow, the choice is yours.
 					</p>
 				</div>
@@ -221,17 +230,17 @@
 </section>
 
 <!-- lightning network -->
-<section class="pt-md-5 dark:bg-black" bind:this={about}>
-	<div class="container-lg px-sm-4 px-3">
-		<div class="row align-items-center justify-content-center flex-md-row flex-column-reverse">
-			<div class="col-md-7 mb-md-0 mb-4">
+<section class="py-8 px-1 dark:bg-black" bind:this={about}>
+	<div class="container sm:px-6 px-3">
+		<div class="flex items-center justify-center flex-col-reverse sm:flex-row">
+			<div class="md:w-3/5 md:mb-0 mb-4">
 				<div>
-					<h6 class="f_bebas_neue txt_purple">Say Goodbye to Waiting</h6>
-					<h2 class="h1 letter_space_2 f_bebas_neue fw-bold dark:text-white br_md_none mb-3 lh-1">
+					<h6 class="f_bebas_neue text-swapee-purple">Say Goodbye to Waiting</h6>
+					<h2 class="text-[2.5rem] leading-10 f_bebas_neue font-bold dark:text-white mb-3 ">
 						Lightning Network <br />
 						Brings Instant Payments
 					</h2>
-					<p class="txt_slate_blue dark:!text-gray-200">
+					<p class="text-stone-600 dark:!text-gray-200">
 						Say goodbye to the headaches of waiting for bank settlements and dealing with
 						chargebacks with our payment solution. With instant settlement and no 3% credit card
 						processing fees, merchants can enjoy hassle-free retail payments.
@@ -244,7 +253,7 @@
 				</div>
 			</div>
 
-			<div class="col-md-5 mb-md-0 mb-5 scale_img_rig">
+			<div class="md:w-2/5 md:mb-0 mb-5 s xs:max-w-[80%] mx-auto">
 				<div>
 					<img src={data.colorThemeSelected == "light" ? "images/swapee-sec-calculator.png" : "images/swapee-sec-calculator-dark.png"} class="hover:scale-[1.015] transition-all duration-500 ease-in-out" alt="" />
 				</div>
@@ -253,22 +262,22 @@
 	</div>
 </section>
 
-<section class="pt-5 bg_light dark:!bg-[#0D0D0D]">
-	<div class="container-lg px-sm-4 px-3">
-		<div class="row align-items-center justify-content-center">
-			<div class="col-md-5">
-				<div>
+<section class="py-8 px-1 bg-stone-100 dark:!bg-[#0D0D0D]">
+	<div class="container sm:px-6 px-3">
+		<div class="flex items-center justify-center flex-col sm:flex-row">
+			<div class="md:w-2/5">
+				<div class="scale-100 sm:scale-[1.2] xs:max-w-[80%] mx-auto">
 					<img src="images/swapee-sec-2-img.png" class="slide-top" alt="" />
 				</div>
 			</div>
 
-			<div class="col-md-7 mb-md-0 mb-4">
+			<div class="md:w-3/5 md:mb-0 mb-4">
 				<div>
-					<h6 class="f_bebas_neue txt_purple">Quick and painless</h6>
-					<h2 class="h1 f_bebas_neue fw-bold dark:text-white br_md_none mb-3 letter_space_2 lh-1">
+					<h6 class="f_bebas_neue text-swapee-purple">Quick and painless</h6>
+					<h2 class="text-[2.5rem] leading-10 f_bebas_neue font-bold dark:text-white mb-3">
 						Simple to uses
 					</h2>
-					<p class="txt_slate_blue dark:!text-gray-200 mb-4">
+					<p class="text-stone-600 dark:!text-gray-200 mb-4">
 						Just enter an amount in your local currency, share the QR code and you’re done. We do
 						all the heavy lifting so you can focus on your business. You always have the option of
 						taking custody of your funds by withdrawing instantly at any time.
@@ -284,22 +293,16 @@
 	</div>
 </section>
 
-<section class="sec_3 position-relative dark:bg-black">
-	<div class="col-md-5 d-xxl-none d-md-block d-none position-absolute img_position">
-		<div>
-			<img src={data.colorThemeSelected == "light" ? "images/swapee-sec-3-img.png" : "images/swapee-sec-3-img-dark.png"} alt="" class="hover:scale-[0.985] transition-all duration-500 ease-in-out" />
-		</div>
-	</div>
-
-	<div class="container-lg px-sm-4 px-3">
-		<div class="row align-items-center justify-content-center flex-md-row flex-column-reverse">
-			<div class="col-md-6 mb-md-0">
+<section class="py-[12vw] px-1 relative dark:bg-black">
+	<div class="container sm:px-6 px-3">
+		<div class="flex items-center justify-center flex-col-reverse sm:flex-row">
+			<div class="flex-1 md:mb-0">
 				<div>
-					<h6 class="f_bebas_neue txt_purple">Customized & Personalized</h6>
-					<h2 class="h1 letter_space_2 f_bebas_neue fw-bold dark:text-white br_md_none mb-3 lh-1">
+					<h6 class="f_bebas_neue text-swapee-purple">Customized & Personalized</h6>
+					<h2 class="text-[2.5rem] leading-10 f_bebas_neue font-bold dark:text-white mb-3">
 						Brand it your way!
 					</h2>
-					<p class="txt_slate_blue dark:!text-gray-200">
+					<p class="text-stone-600 dark:!text-gray-200">
 						You have complete control over your profile page's aesthetic. Customize it with your
 						preferred color scheme, avatar, and banner to reflect your brand, personality and
 						interests.
@@ -312,8 +315,8 @@
 				</div>
 			</div>
 
-			<div class="col-md-6 mb-md-0 mb-4 overflow-hidden">
-				<div class="d-xxl-block d-md-none d-block">
+			<div class="flex-1 md:mb-0 mb-4 overflow-hidden relative">
+				<div class="">
 					<img src={data.colorThemeSelected == "light" ? "images/swapee-sec-3-img.png" : "images/swapee-sec-3-img-dark.png"} alt="" class="hover:scale-[0.985] transition-all duration-500 ease-in-out" />
 				</div>
 			</div>
@@ -321,12 +324,12 @@
 	</div>
 </section>
 
-<section class="py-5 bg_light dark:!bg-[#0D0D0D]">
-	<div class="container-lg px-sm-4 px-3" bind:this={faq}>
-		<div class="row align-items-center justify-content-center">
-			<div class="col-12 text-center">
-				<h6 class="f_bebas_neue txt_purple">This might help</h6>
-				<h2 class="h1 letter_space_2 f_bebas_neue fw-bold dark:text-white br_md_none mb-5 lh-1">
+<section class="py-8 px-1 pb-10 bg-stone-100 dark:!bg-[#0D0D0D]">
+	<div class="container sm:px-6 px-3" bind:this={faq}>
+		<div class="flex flex-wrap items-center justify-center">
+			<div class="w-full text-center">
+				<h6 class="f_bebas_neue text-swapee-purple">This might help</h6>
+				<h2 class="text-[2.5rem] leading-10 f_bebas_neue font-bold dark:text-white mb-10">
 					Frequently asked <br /> questions
 				</h2>
 			</div>
@@ -335,7 +338,7 @@
 				{#each askedQuestionsAccordion as askedQuestionAccordion }
 					<Accordion.Item value={`item-${askedQuestionAccordion.id}`} class="bg-white dark:!bg-black rounded-[10px] border-[1px] border-gray-300 px-4">
 						<Accordion.Trigger class="py-0">
-							<h2 class="text-base pt-3 pb-3 font-bold border-b-black dark:!border-b-swapee-purple {askedQuestionsAccordionValue == `item-${askedQuestionAccordion.id}` ? 'border-b-2' : ''}">{askedQuestionAccordion.title}</h2>
+							<h2 class="text-base pt-3 pb-3 font-bold border-b-black dark:!border-b-swapee-purple dark:text-gray-100 !mb-0 {askedQuestionsAccordionValue == `item-${askedQuestionAccordion.id}` ? 'border-b-2' : ''}">{askedQuestionAccordion.title}</h2>
 						</Accordion.Trigger>
 						<Accordion.Content class="text-base text-slate-500 dark:text-gray-200 mt-0">
 							<Separator orientation="horizontal" class="mt-0 mb-3 bg-purple-950" />
@@ -349,18 +352,20 @@
 </section>
 
 <!-- bitcoin_location -->
-<div class="bitcoin_location dark:bg-black bg-map-light dark:!bg-map-dark bg-no-repeat">
-	<div class="container-lg px-sm-4 px-3">
-		<h2 class="h3 text-center dark:text-white f_bebas_neue fw-bold letter_space_2">
+<div class="flex px-1 justify-center items-center py-[5.625rem] dark:bg-black">
+	<img src="images/map.png" alt="" class="absolute dark:hidden max-h-[354px] min-h-[354px] w-full object-cover object-center" height="375">
+	<img src="images/map-dark.png" alt="" class="absolute hidden dark:block max-h-[354px] min-h-[354px] w-full object-cover object-center" height="375">
+	<div class="container sm:px-6 px-3">
+		<h2 class="text-[2.5rem] text-center dark:text-white f_bebas_neue font-bold mb-2">
 			Real-World Bitcoin Locations
 		</h2>
-		<p class="text-center opacity-75 mb-md-5 mb-4">
-			Join the <span class="fs_18 fw-bold">Growing businesses</span> that accept
-			<span class="fs_18 fw-bold">Bitcoin</span>
-			with <span class="fs_18 fw-bold">Swapee!</span>
+		<p class="text-center opacity-75 md:mb-5 mb-4 dark:!text-gray-100">
+			Join the <span class="text-lg font-bold">Growing businesses</span> that accept
+			<span class="text-lg font-bold">Bitcoin</span>
+			with <span class="text-lg font-bold">Swapee!</span>
 		</p>
-		<div class="d-flex justify-content-center align-items-start flex-wrap">
-			<a href="/" class="btn_line me-sm-3 me-2 mb-4 dark:!text-white">Business Listings</a>
+		<div class="flex justify-center items-center flex-wrap">
+			<a href="/" class="btn_line sm:me-4 me-2 mb-4 dark:!text-white">Business Listings</a>
 			<a href="/" class="btn_black"><span class="px-sm-5 dark:!bg-white dark:!text-black dark:!border-black dark:!border-2">Get Listed</span></a>
 		</div>
 	</div>
@@ -369,5 +374,177 @@
 <Footer />	
 
 <style>
- 
+	.btn_white,
+	.btn_black,
+	.btn_purple{
+    position: relative;
+    font-family: 'Work Sans', sans-serif;
+    text-transform: uppercase;
+    font-weight: 600;
+    display: inline-block;
+    text-decoration: none;
+    border: 2px solid black;
+    border-radius: 100px;
+    -webkit-border-radius: 100px;
+    -moz-border-radius: 100px;
+    -ms-border-radius: 100px;
+    -o-border-radius: 100px;
+    transition: var(--transition_3s);
+    -webkit-transition: var(--transition_3s);
+    -moz-transition: var(--transition_3s);
+    -ms-transition: var(--transition_3s);
+    -o-transition: var(--transition_3s);
+	}
+
+	.btn_white::after,
+	.btn_black::after,
+	.btn_purple::after{
+		content: '';
+		position: absolute;
+		top: 4px;
+		left: 2px;
+		width: 100%;
+		height: 100%;
+		background: black;
+		border: 1px solid black;
+		border-radius: 100px;
+		-webkit-border-radius: 100px;
+		-moz-border-radius: 100px;
+		-ms-border-radius: 100px;
+		-o-border-radius: 100px;
+		transition: all .2s linear;
+		-webkit-transition: all .2s linear;
+		-moz-transition: all .2s linear;
+		-ms-transition: all .2s linear;
+		-o-transition: all .2s linear;
+	}
+
+	.btn_black::after{
+		top: 2px;
+		background: white;
+	}
+
+	.btn_purple:hover,
+	.btn_white:hover,
+	.btn_black:hover{
+		transform: translateY(1px) translateX(1px);
+		-webkit-transform: translateY(1px) translateX(1px);
+		-moz-transform: translateY(1px) translateX(1px);
+		-ms-transform: translateY(1px) translateX(1px);
+		-o-transform: translateY(1px) translateX(1px);
+	}
+
+	.btn_black:hover::after,
+	.btn_white:hover::after,
+	.btn_purple:hover::after{
+		transform: translateY(-2px) translateX(-2px);
+		-webkit-transform: translateY(-2px) translateX(-2px);
+		-moz-transform: translateY(-2px) translateX(-2px);
+		-ms-transform: translateY(-2px) translateX(-2px);
+		-o-transform: translateY(-2px) translateX(-2px);
+	}
+
+	.btn_black span,
+	.btn_white span,
+	.btn_purple span{
+		color: black;
+		width: 100%;
+		height: 100%;
+		display: block;
+		padding: 8px 25px;
+		background: white;
+		position: relative;
+		z-index: 2;
+		border-radius: 100px;
+		-webkit-border-radius: 100px;
+		-moz-border-radius: 100px;
+		-ms-border-radius: 100px;
+		-o-border-radius: 100px;
+	}
+
+	.btn_black span{
+		background: black;
+		color: white;
+	}
+
+	.btn_purple span{
+		background: rgb(113 5 243);
+		color: white;
+	}
+
+	.nav_btn a:not(:last-child){
+		margin-right: 15px;
+	}
+
+	.swapee_3_grids img {
+		height: 230px;
+		height: 65%;
+		max-height: 230px;
+	}
+
+	a.btn_line{
+		text-decoration: none;
+		padding: 9px 25px;
+		font-weight: 600;
+		color: var(--bs-black);
+		text-transform: uppercase;
+		font-family: 'Work Sans', sans-serif;
+		position: relative;
+	}
+
+	a.btn_line:hover::after {
+		width: 100px;
+	}
+
+	a.btn_line::after{
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		width: 50px;
+		height: 2px;
+		background: #7005f3;
+		transform: translateX(-50%);
+		-webkit-transform: translateX(-50%);
+		-moz-transform: translateX(-50%);
+		-ms-transform: translateX(-50%);
+		-o-transform: translateX(-50%);
+		transition: var(--transition_3s);
+		-webkit-transition: var(--transition_3s);
+		-moz-transition: var(--transition_3s);
+		-ms-transition: var(--transition_3s);
+		-o-transition: var(--transition_3s);
+	}
+
+	#offcanvas ul li a{
+		font-size: 14px;
+		font-weight: 600;
+		text-transform: uppercase;
+		font-family: 'Work Sans', sans-serif;
+		position: relative;
+	}
+
+	#offcanvas ul li a::after{
+		content: '';
+		position: absolute;
+		bottom: -2px;
+		left: 50%;
+		width: 0;
+		height: 2px;
+		background: #7105f3;
+		transform: translateX(-50%);
+		-webkit-transform: translateX(-50%);
+		-moz-transform: translateX(-50%);
+		-ms-transform: translateX(-50%);
+		-o-transform: translateX(-50%);
+		transition: var(--transition_3s);
+		-webkit-transition: var(--transition_3s);
+		-moz-transition: var(--transition_3s);
+		-ms-transition: var(--transition_3s);
+		-o-transition: var(--transition_3s);
+	}
+
+	#offcanvas ul li a:hover::after{
+		width: 50px;
+	}
 </style>
diff --git a/src/swapee/css/style.css b/src/swapee/css/style.css
index 06633f62..6761a858 100644
--- a/src/swapee/css/style.css
+++ b/src/swapee/css/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 
 *{
     margin: 0;
@@ -88,139 +88,8 @@ body{
     max-width: 140px;
 }
 
-#offcanvas ul li a{
-    font-size: 14px;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-family: 'Work Sans', sans-serif;
-    position: relative;
-}
 
-#offcanvas ul li a::after{
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 0;
-    height: 2px;
-    background: #7105f3;
-    transform: translateX(-50%);
-    -webkit-transform: translateX(-50%);
-    -moz-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    -o-transform: translateX(-50%);
-    transition: var(--transition_3s);
-    -webkit-transition: var(--transition_3s);
-    -moz-transition: var(--transition_3s);
-    -ms-transition: var(--transition_3s);
-    -o-transition: var(--transition_3s);
-}
-
-#offcanvas ul li a:hover::after{
-    width: 50px;
-}
-
-.btn_white,
-.btn_black,
-.btn_purple{
-    position: relative;
-    font-family: 'Work Sans', sans-serif;
-    text-transform: uppercase;
-    font-weight: 600;
-    display: inline-block;
-    text-decoration: none;
-    border: 2px solid var(--bs-black);
-    border-radius: 100px;
-    -webkit-border-radius: 100px;
-    -moz-border-radius: 100px;
-    -ms-border-radius: 100px;
-    -o-border-radius: 100px;
-    transition: var(--transition_3s);
-    -webkit-transition: var(--transition_3s);
-    -moz-transition: var(--transition_3s);
-    -ms-transition: var(--transition_3s);
-    -o-transition: var(--transition_3s);
-}
 
-.btn_white::after,
-.btn_black::after,
-.btn_purple::after{
-    content: '';
-    position: absolute;
-    top: 4px;
-    left: 2px;
-    width: 100%;
-    height: 100%;
-    background: var(--bs-black);
-    border: 1px solid var(--bs-black);
-    border-radius: 100px;
-    -webkit-border-radius: 100px;
-    -moz-border-radius: 100px;
-    -ms-border-radius: 100px;
-    -o-border-radius: 100px;
-    transition: all .2s linear;
-    -webkit-transition: all .2s linear;
-    -moz-transition: all .2s linear;
-    -ms-transition: all .2s linear;
-    -o-transition: all .2s linear;
-}
-
-.btn_black::after{
-    top: 2px;
-    background: var(--bs-white);
-}
-
-.btn_purple:hover,
-.btn_white:hover,
-.btn_black:hover{
-    transform: translateY(1px) translateX(1px);
-    -webkit-transform: translateY(1px) translateX(1px);
-    -moz-transform: translateY(1px) translateX(1px);
-    -ms-transform: translateY(1px) translateX(1px);
-    -o-transform: translateY(1px) translateX(1px);
-}
-
-.btn_black:hover::after,
-.btn_white:hover::after,
-.btn_purple:hover::after{
-    transform: translateY(-2px) translateX(-2px);
-    -webkit-transform: translateY(-2px) translateX(-2px);
-    -moz-transform: translateY(-2px) translateX(-2px);
-    -ms-transform: translateY(-2px) translateX(-2px);
-    -o-transform: translateY(-2px) translateX(-2px);
-}
-
-.btn_black span,
-.btn_white span,
-.btn_purple span{
-    color: var(--bs-black);
-    width: 100%;
-    height: 100%;
-    display: block;
-    padding: 8px 25px;
-    background: var(--bs-white);
-    position: relative;
-    z-index: 2;
-    border-radius: 100px;
-    -webkit-border-radius: 100px;
-    -moz-border-radius: 100px;
-    -ms-border-radius: 100px;
-    -o-border-radius: 100px;
-}
-
-.btn_black span{
-    background: var(--bs-black);
-    color: var(--bs-white);
-}
-
-.btn_purple span{
-    background: var(--purple);
-    color: var(--bs-white);
-}
-
-.nav_btn a:not(:last-child){
-    margin-right: 15px;
-}
 
 
 /* bitcoin_location */
@@ -295,7 +164,7 @@ body{
     -o-transform: scale(1.2);
 }
 
-.img_position{
+/* .img_position{
     position: absolute;
     top: 50%;
     right: 0;
@@ -304,244 +173,6 @@ body{
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
-}
-
-.sec_3{
-    padding-top: 12vw;
-    padding-bottom: 12vw;
-}
-
-/* accordion NOT MORE BEING USED (AFTER ALTERATIONS, NOW THE ACCORDION IS BUILT WITH TAILWIND + SHADCN) */
-.swapee_accordion {
-    border-radius: 10px;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    -ms-border-radius: 10px;
-    -o-border-radius: 10px;
-    border: 1px solid #D1D5DB;
-}
-
-.swapee_accordion:not(:last-child) {
-    margin-bottom: 20px;
-}
-
-.swapee_accordion h2 {
-    margin-bottom: 0;
-}
-
-.swapee_accordion:first-of-type .accordion-button {
-    border-radius: 10px;
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    -ms-border-radius: 10px;
-    -o-border-radius: 10px;
-}
-
-.swapee_accordion:first-of-type {
-    border-radius: 10px;
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    -ms-border-radius: 10px;
-    -o-border-radius: 10px;
-}
-
-.swapee_accordion:last-of-type {
-    border-radius: 10px;
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    -ms-border-radius: 10px;
-    -o-border-radius: 10px;
-}
-
-.swapee_accordion:first-of-type .accordion-button {
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
-}
-
-.swapee_accordion .accordion-button {
-    font-weight: bold;
-    border-radius: 10px;
-}
-
-.swapee_accordion:last-of-type .accordion-button.collapsed {
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
-}
-
-.swapee_accordion .accordion-button:not(.collapsed)::after {
-    background-image: url("../img/accordion-minus-icon.svg");
-}
-
-.swapee_accordion .accordion-button::after {
-    background-image: url("../img/accordion-plus-icon.svg");
-}
-
-.swapee_accordion .accordion-button:not(.collapsed) {
-    background: var(--bs-white);
-    color: var(--bs-black);
-    border: 1px solid var(--bs-black);
-    border-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    padding-bottom: 0;
-}
-
-.swapee_accordion .accordion-button {
-    transition: all .2s ease-in-out;
-    -webkit-transition: all .2s ease-in-out;
-    -moz-transition: all .2s ease-in-out;
-    -ms-transition: all .2s ease-in-out;
-    -o-transition: all .2s ease-in-out;
-}
-
-
-.swapee_accordion .accordion-collapse {
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
-}
-
-.swapee_accordion .accordion-collapse {
-    border: 1px solid transparent;
-    border-top: none;
-    transition: all .2s ease-in-out;
-    -webkit-transition: all .2s ease-in-out;
-    -moz-transition: all .2s ease-in-out;
-    -ms-transition: all .2s ease-in-out;
-    -o-transition: all .2s ease-in-out;
-}
-
-.swapee_accordion .accordion-collapse.collapse.show {
-    border-color: var(--bs-black);
-}
-
-.swapee_accordion .accordion-button:not(.collapsed) .line {
-    border-bottom: 2px solid var(--bs-black);
-    display: inline-block;
-    padding-bottom: 20px;
-}
-
-.swapee_accordion .accordion-button:not(.collapsed) .line::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 20px;
-    width: 90%;
-    background: #726F72;
-    height: 1px;
-}
-
+} */
 
 /* footer */
-.site_footer{
-    background: var(--bs-black);
-    padding-top: 70px;
-}
-
-.footer_top{
-    border-bottom: 1px solid #ffffff27;
-}
-
-.footer_logo img{
-    max-width: 140px;
-}
-
-.btn_language{
-    border: 1px solid #ffffff70;
-    padding: 6px 16px;
-    text-decoration: none;
-    color: var(--bs-white);
-    border-radius: 100px;
-    -webkit-border-radius: 100px;
-    -moz-border-radius: 100px;
-    -ms-border-radius: 100px;
-    -o-border-radius: 100px;
-    transition: var(--transition_3s);
-    -webkit-transition: var(--transition_3s);
-    -moz-transition: var(--transition_3s);
-    -ms-transition: var(--transition_3s);
-    -o-transition: var(--transition_3s);
-}
-
-.btn_language:hover{
-    background: #ffffffda;
-    border-color: #ffffffda;
-    color: var(--bs-black);
-}
-
-.footer_top_right a{
-    text-decoration: none;
-    color: var(--purple);
-    transition: var(--transition_3s);
-    -webkit-transition: var(--transition_3s);
-    -moz-transition: var(--transition_3s);
-    -ms-transition: var(--transition_3s);
-    -o-transition: var(--transition_3s);
-}
-
-.footer_top_right a:hover{
-    text-decoration: underline;
-}
-
-.footer_top_right .social_links a{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 45px;
-    height: 45px;
-    background: #1f1f1f;
-    border-radius: 100px;
-    -webkit-border-radius: 100px;
-    -moz-border-radius: 100px;
-    -ms-border-radius: 100px;
-    -o-border-radius: 100px;
-    transition: var(--transition_3s);
-    -webkit-transition: var(--transition_3s);
-    -moz-transition: var(--transition_3s);
-    -ms-transition: var(--transition_3s);
-    -o-transition: var(--transition_3s);
-}
-
-.footer_top_right .social_links a:hover{
-    background: var(--purple);
-}
-
-.footer_top_right .social_links a img{
-    width: 40%;
-}
-
-.footer_bottom{
-    display: flex;
-    justify-content: flex-end;
-}
-
-.footer_bottom ul{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-
-.footer_bottom ul li{
-    margin-left: 15px;
-}
-
-.footer_bottom ul li a{
-    padding: 6px 10px;
-    color: var(--bs-white);
-    opacity: 0.20;
-    text-decoration: none;
-    transition: var(--transition_3s);
-    -webkit-transition: var(--transition_3s);
-    -moz-transition: var(--transition_3s);
-    -ms-transition: var(--transition_3s);
-    -o-transition: var(--transition_3s);
-}
-
-.footer_bottom ul li a:hover{
-    opacity: .50;
-}
\ No newline at end of file