From c36adc3a82bd7705819a973b1e55949a7987ff64 Mon Sep 17 00:00:00 2001
From: merajjahir <meraj.jahir17@gmail.com>
Date: Wed, 16 Feb 2022 17:42:23 +0600
Subject: [PATCH]  added 38 footer

---
 dist/tailshape.css                     | 959 ++++++++++++++-----------
 public/componets/footer/37_footer.html | 300 ++++++++
 public/componets/footer/38_footer.html |  86 +++
 public/componets/footer/footer.html    | 367 +++++++++-
 4 files changed, 1296 insertions(+), 416 deletions(-)
 create mode 100644 public/componets/footer/37_footer.html
 create mode 100644 public/componets/footer/38_footer.html

diff --git a/dist/tailshape.css b/dist/tailshape.css
index edbf195..0947f3f 100755
--- a/dist/tailshape.css
+++ b/dist/tailshape.css
@@ -553,10 +553,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   top: 0px;
 }
 
-.right-4 {
-  right: 1rem;
-}
-
 .bottom-auto {
   bottom: auto;
 }
@@ -573,6 +569,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   bottom: 0px;
 }
 
+.right-4 {
+  right: 1rem;
+}
+
 .z-20 {
   z-index: 20;
 }
@@ -629,14 +629,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   grid-column: span 6 / span 6;
 }
 
-.col-auto {
-  grid-column: auto;
-}
-
 .col-span-8 {
   grid-column: span 8 / span 8;
 }
 
+.col-auto {
+  grid-column: auto;
+}
+
 .float-right {
   float: right;
 }
@@ -649,6 +649,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin: 0.25rem;
 }
 
+.m-auto {
+  margin: auto;
+}
+
 .m-2 {
   margin: 0.5rem;
 }
@@ -657,10 +661,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin: 2.5rem;
 }
 
-.m-auto {
-  margin: auto;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -706,6 +706,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 1.5rem;
 }
 
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
 .mx-16 {
   margin-left: 4rem;
   margin-right: 4rem;
@@ -721,26 +736,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 2rem;
 }
 
-.my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-
-.my-3 {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-.my-12 {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
-}
-
 .mt-12 {
   margin-top: 3rem;
 }
@@ -825,14 +825,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 1rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
-.mt-32 {
-  margin-top: 8rem;
-}
-
 .mt-0 {
   margin-top: 0px;
 }
@@ -865,6 +857,30 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-top: -5rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mt-28 {
+  margin-top: 7rem;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mt-24 {
+  margin-top: 6rem;
+}
+
+.mt-32 {
+  margin-top: 8rem;
+}
+
+.-mt-4 {
+  margin-top: -1rem;
+}
+
 .ml-4 {
   margin-left: 1rem;
 }
@@ -901,10 +917,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-top: 5rem;
 }
 
-.mt-24 {
-  margin-top: 6rem;
-}
-
 .ml-0 {
   margin-left: 0px;
 }
@@ -977,14 +989,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 2.5rem;
 }
 
-.mt-28 {
-  margin-top: 7rem;
-}
-
-.ml-auto {
-  margin-left: auto;
-}
-
 .block {
   display: block;
 }
@@ -1037,6 +1041,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 1.5rem;
 }
 
+.h-px {
+  height: 1px;
+}
+
+.h-auto {
+  height: auto;
+}
+
 .h-full {
   height: 100%;
 }
@@ -1045,12 +1057,8 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 0.75rem;
 }
 
-.h-px {
-  height: 1px;
-}
-
-.h-auto {
-  height: auto;
+.h-0 {
+  height: 0px;
 }
 
 .h-20 {
@@ -1113,22 +1121,42 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 6rem;
 }
 
-.w-12 {
-  width: 3rem;
-}
-
 .w-6 {
   width: 1.5rem;
 }
 
-.w-3 {
-  width: 0.75rem;
+.w-12 {
+  width: 3rem;
 }
 
 .w-40 {
   width: 10rem;
 }
 
+.w-2\/3 {
+  width: 66.666667%;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
+.w-52 {
+  width: 13rem;
+}
+
+.w-7 {
+  width: 1.75rem;
+}
+
+.w-44 {
+  width: 11rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
 .w-5\/6 {
   width: 83.333333%;
 }
@@ -1145,30 +1173,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 50%;
 }
 
-.w-2\/3 {
-  width: 66.666667%;
-}
-
 .w-screen {
   width: 100vw;
 }
 
-.w-1\/3 {
-  width: 33.333333%;
-}
-
-.w-52 {
-  width: 13rem;
-}
-
-.w-7 {
-  width: 1.75rem;
-}
-
-.w-44 {
-  width: 11rem;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
@@ -1193,10 +1201,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 80rem;
 }
 
-.max-w-sm {
-  max-width: 24rem;
-}
-
 .max-w-md {
   max-width: 28rem;
 }
@@ -1205,6 +1209,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 100%;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+
 .max-w-6xl {
   max-width: 72rem;
 }
@@ -1217,10 +1233,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 56rem;
 }
 
-.max-w-2xl {
-  max-width: 42rem;
-}
-
 .flex-auto {
   flex: 1 1 auto;
 }
@@ -1431,18 +1443,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-12 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
-}
-
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1455,10 +1455,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
-.space-x-0 > :not([hidden]) ~ :not([hidden]) {
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(0px * var(--tw-space-x-reverse));
-  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-x-8 > :not([hidden]) ~ :not([hidden]) {
@@ -1467,6 +1467,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-12 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+}
+
+.space-x-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0px * var(--tw-space-x-reverse));
+  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1539,6 +1551,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 9999px;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .rounded-t {
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
@@ -1548,14 +1564,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-width: 1px;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border-0 {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-4 {
   border-width: 4px;
 }
@@ -1568,10 +1584,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-top-width: 1px;
 }
 
-.border-b-4 {
-  border-bottom-width: 4px;
-}
-
 .border-t-2 {
   border-top-width: 2px;
 }
@@ -1580,6 +1592,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-left-width: 1px;
 }
 
+.border-b-4 {
+  border-bottom-width: 4px;
+}
+
 .border-none {
   border-style: none;
 }
@@ -1599,19 +1615,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 
-.border-white\/10 {
-  border-color: rgb(255 255 255 / 0.1);
-}
-
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
-.border-white\/25 {
-  border-color: rgb(255 255 255 / 0.25);
-}
-
 .border-gray-700 {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -1622,6 +1630,24 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+.border-white\/10 {
+  border-color: rgb(255 255 255 / 0.1);
+}
+
+.border-white\/25 {
+  border-color: rgb(255 255 255 / 0.25);
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .border-transparent {
   border-color: transparent;
 }
@@ -1656,11 +1682,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
 }
 
-.border-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
-}
-
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1701,11 +1722,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(126 34 206 / var(--tw-bg-opacity));
 }
 
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
 .bg-gray-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1715,14 +1731,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: transparent;
 }
 
-.bg-red-700 {
+.bg-black {
   --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
-}
-
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
 .bg-gray-200 {
@@ -1730,9 +1741,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.bg-green-600 {
+.bg-gray-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
 .bg-yellow-500 {
@@ -1740,9 +1751,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
-.bg-purple-500 {
+.bg-indigo-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
+  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
 }
 
 .bg-indigo-600 {
@@ -1750,6 +1761,41 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
+.bg-cyan-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 250 254 / var(--tw-bg-opacity));
+}
+
+.bg-cyan-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(103 232 249 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.bg-red-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+}
+
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
+}
+
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -1820,29 +1866,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(192 132 252 / var(--tw-bg-opacity));
 }
 
-.bg-gray-400 {
+.bg-orange-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(207 250 254 / var(--tw-bg-opacity));
-}
-
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(103 232 249 / var(--tw-bg-opacity));
+  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-50 {
@@ -1896,26 +1922,22 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-repeat: no-repeat;
 }
 
-.fill-current {
-  fill: currentColor;
-}
-
 .fill-black {
   fill: #000;
 }
 
-.fill-cyan-400 {
-  fill: #22d3ee;
-}
-
-.fill-green-500 {
-  fill: #22c55e;
+.fill-current {
+  fill: currentColor;
 }
 
 .fill-green-600 {
   fill: #16a34a;
 }
 
+.fill-green-500 {
+  fill: #22c55e;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1938,14 +1960,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding: 1rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -2016,16 +2038,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 1.5rem;
 }
 
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
-.px-12 {
-  padding-left: 3rem;
-  padding-right: 3rem;
-}
-
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -2051,11 +2063,26 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 0.25rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
 
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2066,11 +2093,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 2rem;
 }
 
-.px-20 {
-  padding-left: 5rem;
-  padding-right: 5rem;
-}
-
 .py-32 {
   padding-top: 8rem;
   padding-bottom: 8rem;
@@ -2129,6 +2151,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-top: 2rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pt-32 {
   padding-top: 8rem;
 }
@@ -2137,10 +2167,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 3rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
 .pr-12 {
   padding-right: 3rem;
 }
@@ -2209,10 +2235,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 14rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2263,16 +2285,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1.75rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
+.text-7xl {
+  font-size: 4.5rem;
+  line-height: 1;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
@@ -2283,11 +2310,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1;
 }
 
-.text-7xl {
-  font-size: 4.5rem;
-  line-height: 1;
-}
-
 .font-medium {
   font-weight: 500;
 }
@@ -2300,14 +2322,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   font-weight: 600;
 }
 
-.font-extrabold {
-  font-weight: 800;
-}
-
 .font-normal {
   font-weight: 400;
 }
 
+.font-extrabold {
+  font-weight: 800;
+}
+
 .font-light {
   font-weight: 300;
 }
@@ -2419,6 +2441,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
+.text-purple-400 {
+  --tw-text-opacity: 1;
+  color: rgb(192 132 252 / var(--tw-text-opacity));
+}
+
 .text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
@@ -2464,6 +2491,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-blue-900 {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
 .text-purple-600 {
   --tw-text-opacity: 1;
   color: rgb(147 51 234 / var(--tw-text-opacity));
@@ -2474,21 +2506,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(167 139 250 / var(--tw-text-opacity));
 }
 
-.text-green-600 {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
-}
-
-.text-blue-900 {
-  --tw-text-opacity: 1;
-  color: rgb(30 58 138 / var(--tw-text-opacity));
-}
-
-.text-purple-400 {
-  --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
-}
-
 .text-yellow-500 {
   --tw-text-opacity: 1;
   color: rgb(234 179 8 / var(--tw-text-opacity));
@@ -2499,6 +2516,36 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(249 250 251 / var(--tw-text-opacity));
 }
 
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-pink-400 {
+  --tw-text-opacity: 1;
+  color: rgb(244 114 182 / var(--tw-text-opacity));
+}
+
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.text-pink-700 {
+  --tw-text-opacity: 1;
+  color: rgb(190 24 93 / var(--tw-text-opacity));
+}
+
 .text-purple-500 {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity));
@@ -2514,16 +2561,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(79 70 229 / var(--tw-text-opacity));
 }
 
-.text-gray-200 {
-  --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .text-yellow-400 {
   --tw-text-opacity: 1;
   color: rgb(250 204 21 / var(--tw-text-opacity));
@@ -2548,11 +2585,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(236 72 153 / var(--tw-text-opacity));
 }
 
-.text-green-500 {
-  --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
-}
-
 .text-yellow-900 {
   --tw-text-opacity: 1;
   color: rgb(113 63 18 / var(--tw-text-opacity));
@@ -2568,19 +2600,24 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(74 222 128 / var(--tw-text-opacity));
 }
 
-.text-pink-400 {
+.text-green-700 {
   --tw-text-opacity: 1;
-  color: rgb(244 114 182 / var(--tw-text-opacity));
+  color: rgb(21 128 61 / var(--tw-text-opacity));
 }
 
-.text-cyan-800 {
+.text-blue-700 {
   --tw-text-opacity: 1;
-  color: rgb(21 94 117 / var(--tw-text-opacity));
+  color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
-.text-green-800 {
+.text-orange-500 {
   --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity));
+  color: rgb(249 115 22 / var(--tw-text-opacity));
+}
+
+.text-cyan-300 {
+  --tw-text-opacity: 1;
+  color: rgb(103 232 249 / var(--tw-text-opacity));
 }
 
 .underline {
@@ -2593,26 +2630,16 @@ Ensure the default browser behavior of the `hidden` attribute.
           text-decoration-line: none;
 }
 
+.decoration-sky-400 {
+  -webkit-text-decoration-color: #38bdf8;
+          text-decoration-color: #38bdf8;
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.placeholder-gray-400::-moz-placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
-}
-
-.placeholder-gray-400:-ms-input-placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
-}
-
-.placeholder-gray-400::placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
-}
-
 .placeholder-gray-50::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(249 250 251 / var(--tw-placeholder-opacity));
@@ -2628,6 +2655,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(249 250 251 / var(--tw-placeholder-opacity));
 }
 
+.placeholder-gray-400::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-gray-400:-ms-input-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-gray-400::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -2683,6 +2725,28 @@ Ensure the default browser behavior of the `hidden` attribute.
   outline-offset: 2px;
 }
 
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-2 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-yellow-600 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(202 138 4 / var(--tw-ring-opacity));
+}
+
+.ring-yellow-400 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(250 204 21 / var(--tw-ring-opacity));
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2721,6 +2785,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   transition-duration: 700ms;
 }
 
+.duration-100 {
+  transition-duration: 100ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -2729,10 +2797,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   transition-duration: 500ms;
 }
 
-.duration-100 {
-  transition-duration: 100ms;
-}
-
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2816,16 +2880,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.hover\:bg-blue-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-white:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -2846,6 +2900,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -2900,9 +2964,19 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
-.hover\:text-purple-800:hover {
+.hover\:text-purple-200:hover {
   --tw-text-opacity: 1;
-  color: rgb(107 33 168 / var(--tw-text-opacity));
+  color: rgb(233 213 255 / var(--tw-text-opacity));
+}
+
+.hover\:text-purple-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(192 132 252 / var(--tw-text-opacity));
+}
+
+.hover\:text-purple-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(216 180 254 / var(--tw-text-opacity));
 }
 
 .hover\:text-teal-400:hover {
@@ -2925,9 +2999,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(147 51 234 / var(--tw-text-opacity));
 }
 
-.hover\:text-red-500:hover {
+.hover\:text-purple-800:hover {
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+  color: rgb(107 33 168 / var(--tw-text-opacity));
 }
 
 .hover\:text-blue-700:hover {
@@ -2935,16 +3009,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
-.hover\:text-purple-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(233 213 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
-}
-
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -2955,6 +3019,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.hover\:text-red-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .hover\:text-blue-400:hover {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));
@@ -2965,9 +3034,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(244 114 182 / var(--tw-text-opacity));
 }
 
-.hover\:text-purple-500:hover {
+.hover\:text-indigo-600:hover {
   --tw-text-opacity: 1;
-  color: rgb(168 85 247 / var(--tw-text-opacity));
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
 .hover\:text-white:hover {
@@ -2975,29 +3049,39 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-purple-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(168 85 247 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.hover\:text-indigo-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(79 70 229 / var(--tw-text-opacity));
-}
-
 .hover\:text-gray-600:hover {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.hover\:text-purple-300:hover {
+.hover\:text-orange-500:hover {
   --tw-text-opacity: 1;
-  color: rgb(216 180 254 / var(--tw-text-opacity));
+  color: rgb(249 115 22 / var(--tw-text-opacity));
 }
 
-.hover\:text-gray-400:hover {
+.hover\:text-green-400:hover {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+
+.hover\:text-green-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
+.hover\:text-cyan-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(103 232 249 / var(--tw-text-opacity));
 }
 
 .hover\:text-opacity-75:hover {
@@ -3127,16 +3211,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-opacity: 0.8;
 }
 
-.active\:bg-blue-500:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .active\:bg-yellow-400:active {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
 
+.active\:bg-blue-500:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:rounded-2xl {
   border-radius: 1rem;
 }
@@ -3170,11 +3254,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-violet-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(167 139 250 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:bg-purple-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 33 168 / var(--tw-bg-opacity));
@@ -3190,6 +3269,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-violet-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(167 139 250 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-indigo-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(129 140 248 / var(--tw-bg-opacity));
@@ -3205,11 +3289,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(125 211 252 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -3220,6 +3299,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(19 78 74 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -3228,6 +3317,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.dark .dark\:from-black {
+  --tw-gradient-from: #000;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));
+}
+
 .dark .dark\:from-emerald-800 {
   --tw-gradient-from: #065f46;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(6 95 70 / 0));
@@ -3238,15 +3332,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(5 150 105 / 0));
 }
 
-.dark .dark\:from-black {
-  --tw-gradient-from: #000;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));
-}
-
 .dark .dark\:via-emerald-500 {
   --tw-gradient-stops: var(--tw-gradient-from), #10b981, var(--tw-gradient-to, rgb(16 185 129 / 0));
 }
 
+.dark .dark\:to-green-800 {
+  --tw-gradient-to: #166534;
+}
+
 .dark .dark\:to-cyan-800 {
   --tw-gradient-to: #155e75;
 }
@@ -3255,22 +3348,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-to: #14b8a6;
 }
 
-.dark .dark\:to-green-800 {
-  --tw-gradient-to: #166534;
-}
-
 .dark .dark\:fill-white {
   fill: #fff;
 }
 
-.dark .dark\:fill-cyan-400 {
-  fill: #22d3ee;
-}
-
 .dark .dark\:fill-cyan-600 {
   fill: #0891b2;
 }
 
+.dark .dark\:fill-cyan-400 {
+  fill: #22d3ee;
+}
+
 .dark .dark\:p-1 {
   padding: 0.25rem;
 }
@@ -3288,14 +3377,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-50 {
+.dark .dark\:text-gray-300 {
   --tw-text-opacity: 1;
-  color: rgb(249 250 251 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
+  color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
 .dark .dark\:text-purple-400 {
@@ -3303,6 +3387,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(192 132 252 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-purple-300 {
   --tw-text-opacity: 1;
   color: rgb(216 180 254 / var(--tw-text-opacity));
@@ -3318,19 +3407,24 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-purple-700 {
   --tw-text-opacity: 1;
   color: rgb(126 34 206 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-400 {
+.dark .dark\:text-sky-400 {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
+  color: rgb(56 189 248 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-50 {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
 .dark .dark\:text-gray-100 {
@@ -3343,16 +3437,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-violet-400 {
-  --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-sky-400 {
-  --tw-text-opacity: 1;
-  color: rgb(56 189 248 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-sky-300 {
   --tw-text-opacity: 1;
   color: rgb(125 211 252 / var(--tw-text-opacity));
@@ -3363,6 +3447,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(103 232 249 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-violet-400 {
+  --tw-text-opacity: 1;
+  color: rgb(167 139 250 / var(--tw-text-opacity));
+}
+
 .dark .dark\:ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3394,11 +3483,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
-.dark .hover\:dark\:text-violet-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
-}
-
 .dark .dark\:hover\:text-purple-500:hover {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity));
@@ -3419,6 +3503,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(107 33 168 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-sky-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(7 89 133 / var(--tw-text-opacity));
+}
+
+.dark .hover\:dark\:text-violet-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(167 139 250 / var(--tw-text-opacity));
+}
+
 .dark .dark\:hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -3429,11 +3523,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-sky-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(7 89 133 / var(--tw-text-opacity));
-}
-
 .dark .dark\:hover\:text-sky-300:hover {
   --tw-text-opacity: 1;
   color: rgb(125 211 252 / var(--tw-text-opacity));
@@ -3523,14 +3612,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: auto;
   }
 
-  .sm\:ml-4 {
-    margin-left: 1rem;
-  }
-
   .sm\:mr-4 {
     margin-right: 1rem;
   }
 
+  .sm\:ml-4 {
+    margin-left: 1rem;
+  }
+
   .sm\:-mr-20 {
     margin-right: -5rem;
   }
@@ -3619,6 +3708,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 33.333333%;
   }
 
+  .sm\:w-1\/4 {
+    width: 25%;
+  }
+
   .sm\:max-w-xl {
     max-width: 36rem;
   }
@@ -3846,16 +3939,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 0px;
   }
 
-  .md\:my-0 {
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
-
   .md\:-mx-8 {
     margin-left: -2rem;
     margin-right: -2rem;
   }
 
+  .md\:my-0 {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
   .md\:mr-2 {
     margin-right: 0.5rem;
   }
@@ -3928,6 +4021,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     display: none;
   }
 
+  .md\:h-auto {
+    height: auto;
+  }
+
   .md\:h-10 {
     height: 2.5rem;
   }
@@ -3960,6 +4057,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 33.333333%;
   }
 
+  .md\:w-8 {
+    width: 2rem;
+  }
+
+  .md\:w-2\/3 {
+    width: 66.666667%;
+  }
+
   .md\:w-3\/6 {
     width: 50%;
   }
@@ -3968,10 +4073,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 2.5rem;
   }
 
-  .md\:w-2\/3 {
-    width: 66.666667%;
-  }
-
   .md\:w-full {
     width: 100%;
   }
@@ -3988,10 +4089,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 33.333333%;
   }
 
-  .md\:w-8 {
-    width: 2rem;
-  }
-
   .md\:max-w-full {
     max-width: 100%;
   }
@@ -4000,6 +4097,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 28rem;
   }
 
+  .md\:max-w-screen-lg {
+    max-width: 1024px;
+  }
+
   .md\:max-w-lg {
     max-width: 32rem;
   }
@@ -4024,14 +4125,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   .md\:grid-cols-9 {
     grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -4126,6 +4227,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     border-left-width: 1px;
   }
 
+  .md\:border-t {
+    border-top-width: 1px;
+  }
+
   .md\:border-l-0 {
     border-left-width: 0px;
   }
@@ -4134,6 +4239,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     border-right-width: 0px;
   }
 
+  .md\:border-solid {
+    border-style: solid;
+  }
+
   .md\:border-none {
     border-style: none;
   }
@@ -4155,6 +4264,26 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 6rem;
   }
 
+  .md\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .md\:py-0 {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .md\:py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
   .md\:px-10 {
     padding-left: 2.5rem;
     padding-right: 2.5rem;
@@ -4165,11 +4294,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 1rem;
   }
 
-  .md\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-
   .md\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -4180,11 +4304,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 8rem;
   }
 
-  .md\:py-0 {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
   .md\:px-5 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
@@ -4216,6 +4335,26 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 3rem;
   }
 
+  .md\:pt-0 {
+    padding-top: 0px;
+  }
+
+  .md\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
+  .md\:pb-5 {
+    padding-bottom: 1.25rem;
+  }
+
+  .md\:pt-5 {
+    padding-top: 1.25rem;
+  }
+
+  .md\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
+
   .md\:pl-16 {
     padding-left: 4rem;
   }
@@ -4232,10 +4371,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 16rem;
   }
 
-  .md\:pt-0 {
-    padding-top: 0px;
-  }
-
   .md\:text-left {
     text-align: left;
   }
@@ -4253,6 +4388,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1;
   }
 
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
   .md\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
@@ -4273,11 +4413,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1.75rem;
   }
 
-  .md\:text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
   .md\:leading-snug {
     line-height: 1.375;
   }
@@ -4369,6 +4504,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: 2rem;
   }
 
+  .lg\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
   .lg\:mr-12 {
     margin-right: 3rem;
   }
@@ -4393,10 +4532,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 2.5rem;
   }
 
-  .lg\:mb-16 {
-    margin-bottom: 4rem;
-  }
-
   .lg\:block {
     display: block;
   }
@@ -4533,14 +4668,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .lg\:grid-cols-8 {
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
diff --git a/public/componets/footer/37_footer.html b/public/componets/footer/37_footer.html
new file mode 100644
index 0000000..106dc9b
--- /dev/null
+++ b/public/componets/footer/37_footer.html
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../dist/tailshape.css">
+    <title>Footer 37</title>
+</head>
+<body>
+    
+
+    <!-- footer 37 start -->
+    <section class="section_divider">
+        <div>Footer 37</div>
+      </section>
+      <footer class="pt-16 dark:bg-gray-800">
+        <div class="border-t md:px-4 md:pt-10 md:pb-5">
+          <div class="flex flex-wrap md:max-w-screen-lg mx-auto">
+            <section
+              class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+            >
+              <div class="md:hidden">
+                <button
+                  onclick="toggleFooterSection(event)"
+                  class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                  type="button"
+                >
+                  Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas
+                  mattis
+                </button>
+              </div>
+              <a
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+                href="#"
+              >
+                Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas
+                mattis
+              </a>
+              <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+                <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Fusce vel sem</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Ut venenatis tellus</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Vestibulum</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Nunc at ipsum</a>
+                  </li>
+                </ul>
+              </article>
+            </section>
+            <section
+              class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+            >
+              <div class="md:hidden">
+                <button
+                  onclick="toggleFooterSection(event)"
+                  class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                  type="button"
+                >
+                  Ut porta
+                </button>
+              </div>
+              <a
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+                href="#"
+              >
+                Ut porta
+              </a>
+              <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+                <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Pellentesque rhoncus</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Aenean</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Curabitur bibendum</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Phasellus non mi</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Duis accumsa</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Curabitur nec enim</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Fusce ut augue</a>
+                  </li>
+                </ul>
+              </article>
+            </section>
+            <section
+              class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+            >
+              <div class="md:hidden">
+                <button
+                  onclick="toggleFooterSection(event)"
+                  class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                  type="button"
+                >
+                  Praesent elementum
+                </button>
+              </div>
+              <a
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+                href="#"
+              >
+                Praesent elementum
+              </a>
+              <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+                <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Mauris mattis nunc</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Nunc viverra risus</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Etiam a libero</a>
+                  </li>
+                </ul>
+              </article>
+            </section>
+            <section
+              class="relative text-gray-700 font-light  border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+            >
+              <div class="md:hidden">
+                <button
+                  onclick="toggleFooterSection(event)"
+                  class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                  type="button"
+                >
+                  Aenean gravida orci in sem varius
+                </button>
+              </div>
+              <a
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+                href="#"
+              >
+                Aenean gravida orci in sem varius
+              </a>
+              <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+                <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Cras id ipsum</a>
+                  </li>
+                </ul>
+              </article>
+            </section>
+            <section
+              class="relative text-gray-700  font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+            >
+              <div class="md:hidden">
+                <button
+                  onclick="toggleFooterSection(event)"
+                  class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                  type="button"
+                >
+                  Donec a lorem
+                </button>
+              </div>
+              <a
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+                href="#"
+              >
+                Donec a lorem
+              </a>
+              <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+                <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Sed a diam</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Nullam luctus felis</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Sed euismod</a>
+                  </li>
+                </ul>
+              </article>
+            </section>
+            <section
+              class="relative text-gray-700 font-light  border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+            >
+              <div class="md:hidden">
+                <button
+                  onclick="toggleFooterSection(event)"
+                  class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                  type="button"
+                >
+                  Integer interdum
+                </button>
+              </div>
+              <a
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+                href="#"
+              >
+                Integer interdum
+              </a>
+              <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+                <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Dignissim gravida</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Eu mollis elit</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Hendrerit purus id</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Ut luctus dui tincidunt</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Pellentesque at ligula</a>
+                  </li>
+                </ul>
+              </article>
+            </section>
+            <section
+              class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+            >
+              <div class="md:hidden">
+                <button
+                  onclick="toggleFooterSection(event)"
+                  class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                  type="button"
+                >
+                  Quisque
+                </button>
+              </div>
+              <a
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+                href="#"
+              >
+                Quisque
+              </a>
+              <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+                <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Finibus nulla eget</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Pellentesque</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Duis efficitur</a>
+                  </li>
+                  <li class="my-3 tracking-wide">
+                    <a href="#">Cras at lacus</a>
+                  </li>
+                </ul>
+              </article>
+            </section>
+          </div>
+        </div>
+        <div class="max-w-screen-lg mx-auto border-none px-4">
+          <section
+            class="flex flex-col md:flex-row md:justify-between md:border-solid md:border-t text-gray-700 font-light text-sm pt-4 pb-6 md:pt-5 md:pb-6 w-full"
+          >
+            <div>
+              <p class="leading-8 tracking-wide dark:text-sky-400">
+                &copy; Lorem Ipsum Co., 123 Lorem Street, New York, NY
+              </p>
+            </div>
+            <div>
+              <p class="leading-8 tracking-wide dark:text-sky-400">Privacy Policy</p>
+            </div>
+          </section>
+        </div>
+      </footer>
+      <script>
+        function toggleFooterSection(e) {
+          const list = e.target.parentElement.parentElement.querySelector(
+            "article"
+          );
+          if (list.classList.contains("h-0")) {
+            list.classList.remove("h-0");
+          } else {
+            list.classList.add("h-0");
+          }
+        }
+      </script>
+      
+      <!-- footer 37 end -->
+  
+  
+  
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/footer/38_footer.html b/public/componets/footer/38_footer.html
new file mode 100644
index 0000000..4919a37
--- /dev/null
+++ b/public/componets/footer/38_footer.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../dist/tailshape.css">
+    <title>Footer 37</title>
+</head>
+<body>
+    
+
+    <!-- footer 38 start -->
+    <section class="section_divider">
+        <div>Footer 38</div>
+      </section>
+      <!-- component -->
+      <section class="">
+        <div class=" bg-grey-400 dark:bg-gray-800 p-8">
+            <div class="sm:flex mb-4">
+          <div class="sm:w-1/4 h-auto">
+              <div class="text-orange-500 mb-2">Orange</div>
+              <ul class="list-reset leading-normal">
+                  <li class="hover:text-orange-500 text-grey-400">One</li>
+                  <li class="hover:text-orange-500 text-grey-400">Two</li>
+                  <li class="hover:text-orange-500 text-grey-400">Three</li>
+                  <li class="hover:text-orange-500 text-grey-400">Four</li>
+                  <li class="hover:text-orange-500 text-grey-400">Five</li>
+                  <li class="hover:text-orange-500 text-grey-400">Six</li>
+                  <li class="hover:text-orange-500 text-grey-400">Seven</li>
+                  <li class="hover:text-orange-500 text-grey-400">Eight</li>
+              </ul>
+          </div>
+          <div class="sm:w-1/4 h-auto sm:mt-0 mt-8">
+              <div class="text-blue-700 mb-2">Blue</div>
+              <ul class="list-reset leading-normal">
+                  <li class="hover:text-blue-700 text-grey-400">One</li>
+                  <li class="hover:text-blue-700 text-grey-400">Two</li>
+                  <li class="hover:text-blue-700 text-grey-400">Three</li>
+              </ul>
+
+            <div class="text-blue-400 mb-2 mt-4">Blue-light</div>
+              <ul class="list-reset leading-normal">
+                  <li class="hover:text-blue-400 text-grey-400">One</li>
+                  <li class="hover:text-blue-400 text-grey-400">Two</li>
+                  <li class="hover:text-blue-400 text-grey-400">Three</li>
+              </ul>
+
+          </div>
+          <div class="sm:w-1/4 h-auto sm:mt-0 mt-8">
+                    <div class="text-green-700 mb-2">Green-dark</div>
+              <ul class="list-reset leading-normal">
+                  <li class="hover:text-green-700 text-grey-400">One</li>
+                  <li class="hover:text-green-700 text-grey-400">Two</li>
+                  <li class="hover:text-green-700 text-grey-400">Three</li>
+              </ul>
+
+            <div class="text-green-400 mb-2 mt-4">Green-light</div>
+              <ul class="list-reset leading-normal">
+                  <li class="hover:text-green-400 text-grey-darker">One</li>
+                  <li class="hover:text-green-400 text-grey-darker">Two</li>
+                  <li class="hover:text-green-400 text-grey-darker">Three</li>
+              </ul>
+
+
+          </div>
+            <div class="sm:w-1/2 sm:mt-0 mt-8 h-auto">
+                <div class="text-red-light mb-2 font-bold underline dark:text-gray-400 hover:text-cyan-300">Newsletter</div>
+                <p class="text-grey-darker leading-normal text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, consectetur. </p>
+                <div class="mt-4 flex">
+                    <input type="text" class="p-2 border border-grey-light round text-grey-dark text-sm h-auto" placeholder="Your email address">
+                    <button class="bg-orange-500 text-gray-300 font-semibold  rounded-sm h-auto text-xs p-3">Subscribe</button>
+                </div>
+            </div>
+
+        </div>
+        </div>
+      </section>
+    <!-- footer 38 end -->
+
+
+  
+  
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/footer/footer.html b/public/componets/footer/footer.html
index 0e63c88..376ce5b 100644
--- a/public/componets/footer/footer.html
+++ b/public/componets/footer/footer.html
@@ -3201,9 +3201,15 @@
               </h5>
               <div class="mt-6 lg:mb-0 mb-6">
                 <button class="bg-white text-lightBlue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
-                  <i class="fab fa-twitter"></i></button><button class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
-                  <i class="fab fa-facebook-square"></i></button><button class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
-                  <i class="fab fa-dribbble"></i></button><button class="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
+                  <i class="fab fa-twitter"></i>
+                </button>
+                <button class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
+                  <i class="fab fa-facebook-square"></i>
+                </button>
+                <button class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
+                  <i class="fab fa-dribbble"></i>
+                </button>
+                <button class="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
                   <i class="fab fa-github"></i>
                 </button>
               </div>
@@ -3345,10 +3351,363 @@
       </div>
   </div>
 
-    
     <!-- footer 36 end   -->
 
 
+    <!-- footer 37 start -->
+    <section class="section_divider">
+      <div>Footer 37</div>
+    </section>
+    <footer class="pt-16 dark:bg-gray-800">
+      <div class="border-t md:px-4 md:pt-10 md:pb-5">
+        <div class="flex flex-wrap md:max-w-screen-lg mx-auto">
+          <section
+            class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+          >
+            <div class="md:hidden">
+              <button
+                onclick="toggleFooterSection(event)"
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                type="button"
+              >
+                Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas
+                mattis
+              </button>
+            </div>
+            <a
+              class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+              href="#"
+            >
+              Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas
+              mattis
+            </a>
+            <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+              <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                <li class="my-3 tracking-wide">
+                  <a href="#">Fusce vel sem</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Ut venenatis tellus</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Vestibulum</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Nunc at ipsum</a>
+                </li>
+              </ul>
+            </article>
+          </section>
+          <section
+            class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+          >
+            <div class="md:hidden">
+              <button
+                onclick="toggleFooterSection(event)"
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                type="button"
+              >
+                Ut porta
+              </button>
+            </div>
+            <a
+              class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+              href="#"
+            >
+              Ut porta
+            </a>
+            <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+              <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                <li class="my-3 tracking-wide">
+                  <a href="#">Pellentesque rhoncus</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Aenean</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Curabitur bibendum</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Phasellus non mi</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Duis accumsa</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Curabitur nec enim</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Fusce ut augue</a>
+                </li>
+              </ul>
+            </article>
+          </section>
+          <section
+            class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+          >
+            <div class="md:hidden">
+              <button
+                onclick="toggleFooterSection(event)"
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                type="button"
+              >
+                Praesent elementum
+              </button>
+            </div>
+            <a
+              class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+              href="#"
+            >
+              Praesent elementum
+            </a>
+            <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+              <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                <li class="my-3 tracking-wide">
+                  <a href="#">Mauris mattis nunc</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Nunc viverra risus</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Etiam a libero</a>
+                </li>
+              </ul>
+            </article>
+          </section>
+          <section
+            class="relative text-gray-700 font-light  border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+          >
+            <div class="md:hidden">
+              <button
+                onclick="toggleFooterSection(event)"
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                type="button"
+              >
+                Aenean gravida orci in sem varius
+              </button>
+            </div>
+            <a
+              class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+              href="#"
+            >
+              Aenean gravida orci in sem varius
+            </a>
+            <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+              <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                <li class="my-3 tracking-wide">
+                  <a href="#">Cras id ipsum</a>
+                </li>
+              </ul>
+            </article>
+          </section>
+          <section
+            class="relative text-gray-700  font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+          >
+            <div class="md:hidden">
+              <button
+                onclick="toggleFooterSection(event)"
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                type="button"
+              >
+                Donec a lorem
+              </button>
+            </div>
+            <a
+              class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+              href="#"
+            >
+              Donec a lorem
+            </a>
+            <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+              <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                <li class="my-3 tracking-wide">
+                  <a href="#">Sed a diam</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Nullam luctus felis</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Sed euismod</a>
+                </li>
+              </ul>
+            </article>
+          </section>
+          <section
+            class="relative text-gray-700 font-light  border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+          >
+            <div class="md:hidden">
+              <button
+                onclick="toggleFooterSection(event)"
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                type="button"
+              >
+                Integer interdum
+              </button>
+            </div>
+            <a
+              class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+              href="#"
+            >
+              Integer interdum
+            </a>
+            <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+              <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                <li class="my-3 tracking-wide">
+                  <a href="#">Dignissim gravida</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Eu mollis elit</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Hendrerit purus id</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Ut luctus dui tincidunt</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Pellentesque at ligula</a>
+                </li>
+              </ul>
+            </article>
+          </section>
+          <section
+            class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
+          >
+            <div class="md:hidden">
+              <button
+                onclick="toggleFooterSection(event)"
+                class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
+                type="button"
+              >
+                Quisque
+              </button>
+            </div>
+            <a
+              class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
+              href="#"
+            >
+              Quisque
+            </a>
+            <article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
+              <ul class="my-5 text-sm tracking-wide dark:text-sky-400">
+                <li class="my-3 tracking-wide">
+                  <a href="#">Finibus nulla eget</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Pellentesque</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Duis efficitur</a>
+                </li>
+                <li class="my-3 tracking-wide">
+                  <a href="#">Cras at lacus</a>
+                </li>
+              </ul>
+            </article>
+          </section>
+        </div>
+      </div>
+      <div class="max-w-screen-lg mx-auto border-none px-4">
+        <section
+          class="flex flex-col md:flex-row md:justify-between md:border-solid md:border-t text-gray-700 font-light text-sm pt-4 pb-6 md:pt-5 md:pb-6 w-full"
+        >
+          <div>
+            <p class="leading-8 tracking-wide dark:text-sky-400">
+              &copy; Lorem Ipsum Co., 123 Lorem Street, New York, NY
+            </p>
+          </div>
+          <div>
+            <p class="leading-8 tracking-wide dark:text-sky-400">Privacy Policy</p>
+          </div>
+        </section>
+      </div>
+    </footer>
+    <script>
+      function toggleFooterSection(e) {
+        const list = e.target.parentElement.parentElement.querySelector(
+          "article"
+        );
+        if (list.classList.contains("h-0")) {
+          list.classList.remove("h-0");
+        } else {
+          list.classList.add("h-0");
+        }
+      }
+    </script>
+    
+    <!-- footer 37 end -->
+
+
+    <!-- footer 38 start -->
+      <section class="section_divider">
+        <div>Footer 38</div>
+      </section>
+      <!-- component -->
+      <section class="">
+        <div class=" bg-grey-400 dark:bg-gray-800 p-8">
+            <div class="sm:flex mb-4">
+          <div class="sm:w-1/4 h-auto">
+              <div class="text-orange-500 mb-2">Orange</div>
+              <ul class="list-reset leading-normal">
+                  <li class="hover:text-orange-500 text-grey-400">One</li>
+                  <li class="hover:text-orange-500 text-grey-400">Two</li>
+                  <li class="hover:text-orange-500 text-grey-400">Three</li>
+                  <li class="hover:text-orange-500 text-grey-400">Four</li>
+                  <li class="hover:text-orange-500 text-grey-400">Five</li>
+                  <li class="hover:text-orange-500 text-grey-400">Six</li>
+                  <li class="hover:text-orange-500 text-grey-400">Seven</li>
+                  <li class="hover:text-orange-500 text-grey-400">Eight</li>
+              </ul>
+          </div>
+          <div class="sm:w-1/4 h-auto sm:mt-0 mt-8">
+              <div class="text-blue-700 mb-2">Blue</div>
+              <ul class="list-reset leading-normal">
+                  <li class="hover:text-blue-700 text-grey-400">One</li>
+                  <li class="hover:text-blue-700 text-grey-400">Two</li>
+                  <li class="hover:text-blue-700 text-grey-400">Three</li>
+              </ul>
+
+            <div class="text-blue-400 mb-2 mt-4">Blue-light</div>
+              <ul class="list-reset leading-normal">
+                  <li class="hover:text-blue-400 text-grey-400">One</li>
+                  <li class="hover:text-blue-400 text-grey-400">Two</li>
+                  <li class="hover:text-blue-400 text-grey-400">Three</li>
+              </ul>
+
+          </div>
+          <div class="sm:w-1/4 h-auto sm:mt-0 mt-8">
+                    <div class="text-green-700 mb-2">Green-dark</div>
+              <ul class="list-reset leading-normal">
+                  <li class="hover:text-green-700 text-grey-400">One</li>
+                  <li class="hover:text-green-700 text-grey-400">Two</li>
+                  <li class="hover:text-green-700 text-grey-400">Three</li>
+              </ul>
+
+            <div class="text-green-400 mb-2 mt-4">Green-light</div>
+              <ul class="list-reset leading-normal">
+                  <li class="hover:text-green-400 text-grey-darker">One</li>
+                  <li class="hover:text-green-400 text-grey-darker">Two</li>
+                  <li class="hover:text-green-400 text-grey-darker">Three</li>
+              </ul>
+
+
+          </div>
+            <div class="sm:w-1/2 sm:mt-0 mt-8 h-auto">
+                <div class="text-red-light mb-2 font-bold underline dark:text-gray-400 hover:text-cyan-300">Newsletter</div>
+                <p class="text-grey-darker leading-normal text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, consectetur. </p>
+                <div class="mt-4 flex">
+                    <input type="text" class="p-2 border border-grey-light round text-grey-dark text-sm h-auto" placeholder="Your email address">
+                    <button class="bg-orange-500 text-gray-300 font-semibold  rounded-sm h-auto text-xs p-3">Subscribe</button>
+                </div>
+            </div>
+
+        </div>
+        </div>
+      </section>
+    <!-- footer 38 end -->
+
+
+
 
 
     <!-- start of script section -->