From 139afa8105d9ee35c4841596fff5bb0b648d1291 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Thu, 30 Oct 2025 14:39:12 -0300
Subject: [PATCH] add html pages

---
 public/assets/css/style.css | 31862 ++++++++++++++++++++++++++++++++++
 public/html/404.html        |   670 +
 public/html/about.html      |  1085 ++
 public/html/about2.html     |  1065 ++
 public/html/blog-post.html  |  1050 ++
 public/html/blog-post2.html |  1153 ++
 public/html/blog-post3.html |  1153 ++
 public/html/blog.html       |   961 +
 public/html/blog2.html      |  1067 ++
 public/html/blog3.html      |  1067 ++
 public/html/career.html     |  1099 ++
 public/html/career2.html    |   964 +
 public/html/terms.html      |   786 +
 13 files changed, 43982 insertions(+)
 create mode 100644 public/assets/css/style.css
 create mode 100644 public/html/404.html
 create mode 100644 public/html/about.html
 create mode 100644 public/html/about2.html
 create mode 100644 public/html/blog-post.html
 create mode 100644 public/html/blog-post2.html
 create mode 100644 public/html/blog-post3.html
 create mode 100644 public/html/blog.html
 create mode 100644 public/html/blog2.html
 create mode 100644 public/html/blog3.html
 create mode 100644 public/html/career.html
 create mode 100644 public/html/career2.html
 create mode 100644 public/html/terms.html

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
new file mode 100644
index 0000000..d2e6f2c
--- /dev/null
+++ b/public/assets/css/style.css
@@ -0,0 +1,31862 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;family=Manrope:wght@400;500;700&amp;family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap");
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --spacing: 0.25rem;
+    --container-3xs: 16rem;
+    --container-2xs: 18rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --text-9xl: 8rem;
+    --text-9xl--line-height: 1;
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
+    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
+    --blur-xs: 4px;
+    --blur-sm: 8px;
+    --blur-md: 12px;
+    --blur-lg: 16px;
+    --blur-xl: 24px;
+    --blur-2xl: 40px;
+    --blur-3xl: 64px;
+    --perspective-dramatic: 100px;
+    --perspective-near: 300px;
+    --perspective-normal: 500px;
+    --perspective-midrange: 800px;
+    --perspective-distant: 1200px;
+    --aspect-video: 16 / 9;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-font-feature-settings: var(--font-sans--font-feature-settings);
+    --default-font-variation-settings: var(
+      --font-sans--font-variation-settings
+    );
+    --default-mono-font-family: var(--font-mono);
+    --default-mono-font-feature-settings: var(
+      --font-mono--font-feature-settings
+    );
+    --default-mono-font-variation-settings: var(
+      --font-mono--font-variation-settings
+    );
+    --font-IBMPlexSerif: "IBM Plex Serif", "serif";
+    --font-SpaceGrotesk: "Space Grotesk", "sans-serif";
+    --font-Manrope: "Arial", "sans-serif";
+    --font-Unicons: "Unicons";
+    --font-Monospace: "SFMono-Regular,Menlo,Monaco,Consolas","Liberation Mono","Courier New","monospace";
+    --font-Custom: "Custom";
+    --font-DMSerif: "DM Serif Display";
+    --font-SansSerif: "sans-serif";
+    --font-THICCCBOI: "THICCCBOI", "sans-serif";
+    --font-Urbanist: "Urbanist", "sans-serif";
+    --color-white: #ffffff;
+    --color-black: #000000;
+    --breakpoint-xxl: 1400px;
+    --breakpoint-xl: 1200px;
+    --breakpoint-lg: 992px;
+    --breakpoint-md: 768px;
+    --breakpoint-sm: 576px;
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var( --default-font-variation-settings, normal );
+    -webkit-tap-highlight-color: transparent;
+  }
+  body {
+    line-height: inherit;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
+    font-feature-settings: var( --default-mono-font-feature-settings, normal );
+    font-variation-settings: var( --default-mono-font-variation-settings, normal );
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+    color: color-mix(in oklab, currentColor 50%, transparent);
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .\@container {
+    container-type: inline-size;
+  }
+  .\@container-\[inline-size\] {
+    container-type: inline-size;
+  }
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .collapse {
+    visibility: collapse;
+  }
+  .invisible {
+    visibility: hidden;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+  .\!absolute {
+    position: absolute !important;
+  }
+  .\!relative {
+    position: relative !important;
+  }
+  .\!sticky {
+    position: sticky !important;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
+  .start-0 {
+    inset-inline-start: calc(var(--spacing) * 0);
+  }
+  .start-50 {
+    inset-inline-start: calc(var(--spacing) * 50);
+  }
+  .start-100 {
+    inset-inline-start: calc(var(--spacing) * 100);
+  }
+  .end-0 {
+    inset-inline-end: calc(var(--spacing) * 0);
+  }
+  .end-1 {
+    inset-inline-end: calc(var(--spacing) * 1);
+  }
+  .end-2 {
+    inset-inline-end: calc(var(--spacing) * 2);
+  }
+  .end-50 {
+    inset-inline-end: calc(var(--spacing) * 50);
+  }
+  .end-100 {
+    inset-inline-end: calc(var(--spacing) * 100);
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .top-2\/4 {
+    top: calc(2/4 * 100%);
+  }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+  .top-50 {
+    top: calc(var(--spacing) * 50);
+  }
+  .top-100 {
+    top: calc(var(--spacing) * 100);
+  }
+  .top-\[-0\.2rem\] {
+    top: -0.2rem;
+  }
+  .top-\[0\.2rem\] {
+    top: 0.2rem;
+  }
+  .\!right-0 {
+    right: calc(var(--spacing) * 0) !important;
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
+  .right-6 {
+    right: calc(var(--spacing) * 6);
+  }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+  .bottom-6 {
+    bottom: calc(var(--spacing) * 6);
+  }
+  .bottom-50 {
+    bottom: calc(var(--spacing) * 50);
+  }
+  .bottom-100 {
+    bottom: calc(var(--spacing) * 100);
+  }
+  .bottom-\[-2rem\] {
+    bottom: -2rem;
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .isolate {
+    isolation: isolate;
+  }
+  .isolation-auto {
+    isolation: auto;
+  }
+  .\!z-10 {
+    z-index: 10 !important;
+  }
+  .\!z-\[1\] {
+    z-index: 1 !important;
+  }
+  .\!z-\[2\] {
+    z-index: 2 !important;
+  }
+  .\!z-\[5\] {
+    z-index: 5 !important;
+  }
+  .z-0 {
+    z-index: 0;
+  }
+  .z-1 {
+    z-index: 1;
+  }
+  .z-2 {
+    z-index: 2;
+  }
+  .z-3 {
+    z-index: 3;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-\[-1\] {
+    z-index: -1;
+  }
+  .z-\[0\] {
+    z-index: 0;
+  }
+  .z-\[1010\] {
+    z-index: 1010;
+  }
+  .z-\[1\] {
+    z-index: 1;
+  }
+  .z-\[2\] {
+    z-index: 2;
+  }
+  .z-\[3\] {
+    z-index: 3;
+  }
+  .z-\[555\] {
+    z-index: 555;
+  }
+  .z-\[5\] {
+    z-index: 5;
+  }
+  .z-\[9\] {
+    z-index: 9;
+  }
+  .z-\[888\] {
+    z-index: 888;
+  }
+  .z-auto {
+    z-index: auto;
+  }
+  .order-0 {
+    order: 0;
+  }
+  .order-1 {
+    order: 1;
+  }
+  .order-2 {
+    order: 2;
+  }
+  .order-3 {
+    order: 3;
+  }
+  .order-4 {
+    order: 4;
+  }
+  .order-5 {
+    order: 5;
+  }
+  .order-first {
+    order: -9999;
+  }
+  .order-last {
+    order: 9999;
+  }
+  .order-none {
+    order: 0;
+  }
+  .col-auto {
+    grid-column: auto;
+  }
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+  .col-start-auto {
+    grid-column-start: auto;
+  }
+  .col-end-auto {
+    grid-column-end: auto;
+  }
+  .row-auto {
+    grid-row: auto;
+  }
+  .row-span-full {
+    grid-row: 1 / -1;
+  }
+  .row-start-auto {
+    grid-row-start: auto;
+  }
+  .row-end-auto {
+    grid-row-end: auto;
+  }
+  .float-end {
+    float: inline-end;
+  }
+  .float-left {
+    float: left;
+  }
+  .float-none {
+    float: none;
+  }
+  .float-right {
+    float: right;
+  }
+  .float-start {
+    float: inline-start;
+  }
+  .clear-both {
+    clear: both;
+  }
+  .clear-end {
+    clear: inline-end;
+  }
+  .clear-left {
+    clear: left;
+  }
+  .clear-none {
+    clear: none;
+  }
+  .clear-right {
+    clear: right;
+  }
+  .clear-start {
+    clear: inline-start;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 576px) {
+      max-width: 576px;
+    }
+    @media (width >= 768px) {
+      max-width: 768px;
+    }
+    @media (width >= 992px) {
+      max-width: 992px;
+    }
+    @media (width >= 1200px) {
+      max-width: 1200px;
+    }
+    @media (width >= 1400px) {
+      max-width: 1400px;
+    }
+  }
+  .container\! {
+    width: 100% !important;
+    @media (width >= 576px) {
+      max-width: 576px !important;
+    }
+    @media (width >= 768px) {
+      max-width: 768px !important;
+    }
+    @media (width >= 992px) {
+      max-width: 992px !important;
+    }
+    @media (width >= 1200px) {
+      max-width: 1200px !important;
+    }
+    @media (width >= 1400px) {
+      max-width: 1400px !important;
+    }
+  }
+  .\!m-0 {
+    margin: calc(var(--spacing) * 0) !important;
+  }
+  .\!m-\[0_\.7rem_0_0\] {
+    margin: 0 .7rem 0 0 !important;
+  }
+  .\!m-\[0_\.35rem\] {
+    margin: 0 .35rem !important;
+  }
+  .\!m-\[0_0_0_\.7rem\] {
+    margin: 0 0 0 .7rem !important;
+  }
+  .\!m-\[0_auto_1rem\] {
+    margin: 0 auto 1rem !important;
+  }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .m-1 {
+    margin: calc(var(--spacing) * 1);
+  }
+  .m-2 {
+    margin: calc(var(--spacing) * 2);
+  }
+  .m-3 {
+    margin: calc(var(--spacing) * 3);
+  }
+  .m-4 {
+    margin: calc(var(--spacing) * 4);
+  }
+  .m-5 {
+    margin: calc(var(--spacing) * 5);
+  }
+  .m-6 {
+    margin: calc(var(--spacing) * 6);
+  }
+  .m-7 {
+    margin: calc(var(--spacing) * 7);
+  }
+  .m-8 {
+    margin: calc(var(--spacing) * 8);
+  }
+  .m-9 {
+    margin: calc(var(--spacing) * 9);
+  }
+  .m-10 {
+    margin: calc(var(--spacing) * 10);
+  }
+  .m-11 {
+    margin: calc(var(--spacing) * 11);
+  }
+  .m-12 {
+    margin: calc(var(--spacing) * 12);
+  }
+  .m-13 {
+    margin: calc(var(--spacing) * 13);
+  }
+  .m-14 {
+    margin: calc(var(--spacing) * 14);
+  }
+  .m-15 {
+    margin: calc(var(--spacing) * 15);
+  }
+  .m-16 {
+    margin: calc(var(--spacing) * 16);
+  }
+  .m-17 {
+    margin: calc(var(--spacing) * 17);
+  }
+  .m-18 {
+    margin: calc(var(--spacing) * 18);
+  }
+  .m-19 {
+    margin: calc(var(--spacing) * 19);
+  }
+  .m-20 {
+    margin: calc(var(--spacing) * 20);
+  }
+  .m-21 {
+    margin: calc(var(--spacing) * 21);
+  }
+  .m-22 {
+    margin: calc(var(--spacing) * 22);
+  }
+  .m-23 {
+    margin: calc(var(--spacing) * 23);
+  }
+  .m-24 {
+    margin: calc(var(--spacing) * 24);
+  }
+  .m-25 {
+    margin: calc(var(--spacing) * 25);
+  }
+  .m-\[\.25rem_\.5rem_0_0\] {
+    margin: .25rem .5rem 0 0;
+  }
+  .m-\[0_\.7rem_0_0\] {
+    margin: 0 .7rem 0 0;
+  }
+  .m-\[0_\.35rem\] {
+    margin: 0 .35rem;
+  }
+  .m-\[0_0_0_\.7rem\] {
+    margin: 0 0 0 .7rem;
+  }
+  .m-\[0_0_1rem\] {
+    margin: 0 0 1rem;
+  }
+  .m-\[0_1rem_0_0\] {
+    margin: 0 1rem 0 0;
+  }
+  .m-\[0_auto\] {
+    margin: 0 auto;
+  }
+  .m-\[0_auto_1rem\] {
+    margin: 0 auto 1rem;
+  }
+  .m-\[4\.5rem_0\] {
+    margin: 4.5rem 0;
+  }
+  .m-auto {
+    margin: auto;
+  }
+  .container {
+    margin-inline: auto;
+    padding-inline: 2rem;
+  }
+  .container\! {
+    margin-inline: auto !important;
+    padding-inline: 2rem !important;
+  }
+  .\!mx-\[0\.35rem\] {
+    margin-inline: 0.35rem !important;
+  }
+  .\!mx-auto {
+    margin-inline: auto !important;
+  }
+  .mx-0 {
+    margin-inline: calc(var(--spacing) * 0);
+  }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
+  .mx-5 {
+    margin-inline: calc(var(--spacing) * 5);
+  }
+  .mx-6 {
+    margin-inline: calc(var(--spacing) * 6);
+  }
+  .mx-7 {
+    margin-inline: calc(var(--spacing) * 7);
+  }
+  .mx-8 {
+    margin-inline: calc(var(--spacing) * 8);
+  }
+  .mx-9 {
+    margin-inline: calc(var(--spacing) * 9);
+  }
+  .mx-10 {
+    margin-inline: calc(var(--spacing) * 10);
+  }
+  .mx-11 {
+    margin-inline: calc(var(--spacing) * 11);
+  }
+  .mx-12 {
+    margin-inline: calc(var(--spacing) * 12);
+  }
+  .mx-13 {
+    margin-inline: calc(var(--spacing) * 13);
+  }
+  .mx-14 {
+    margin-inline: calc(var(--spacing) * 14);
+  }
+  .mx-15 {
+    margin-inline: calc(var(--spacing) * 15);
+  }
+  .mx-16 {
+    margin-inline: calc(var(--spacing) * 16);
+  }
+  .mx-17 {
+    margin-inline: calc(var(--spacing) * 17);
+  }
+  .mx-18 {
+    margin-inline: calc(var(--spacing) * 18);
+  }
+  .mx-19 {
+    margin-inline: calc(var(--spacing) * 19);
+  }
+  .mx-20 {
+    margin-inline: calc(var(--spacing) * 20);
+  }
+  .mx-21 {
+    margin-inline: calc(var(--spacing) * 21);
+  }
+  .mx-22 {
+    margin-inline: calc(var(--spacing) * 22);
+  }
+  .mx-23 {
+    margin-inline: calc(var(--spacing) * 23);
+  }
+  .mx-24 {
+    margin-inline: calc(var(--spacing) * 24);
+  }
+  .mx-25 {
+    margin-inline: calc(var(--spacing) * 25);
+  }
+  .mx-\[-0\.5rem\] {
+    margin-inline: -0.5rem;
+  }
+  .mx-\[-5px\] {
+    margin-inline: -5px;
+  }
+  .mx-\[-7\.5px\] {
+    margin-inline: -7.5px;
+  }
+  .mx-\[-10px\] {
+    margin-inline: -10px;
+  }
+  .mx-\[-12\.5px\] {
+    margin-inline: -12.5px;
+  }
+  .mx-\[-15px\] {
+    margin-inline: -15px;
+  }
+  .mx-\[-17\.5px\] {
+    margin-inline: -17.5px;
+  }
+  .mx-\[-20px\] {
+    margin-inline: -20px;
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .\!my-0 {
+    margin-block: calc(var(--spacing) * 0) !important;
+  }
+  .\!my-3 {
+    margin-block: calc(var(--spacing) * 3) !important;
+  }
+  .\!my-4 {
+    margin-block: calc(var(--spacing) * 4) !important;
+  }
+  .\!my-8 {
+    margin-block: calc(var(--spacing) * 8) !important;
+  }
+  .\!my-14 {
+    margin-block: calc(var(--spacing) * 14) !important;
+  }
+  .\!my-\[3\.5rem\] {
+    margin-block: 3.5rem !important;
+  }
+  .\!my-\[4\.5rem\] {
+    margin-block: 4.5rem !important;
+  }
+  .my-0 {
+    margin-block: calc(var(--spacing) * 0);
+  }
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .my-3 {
+    margin-block: calc(var(--spacing) * 3);
+  }
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .my-5 {
+    margin-block: calc(var(--spacing) * 5);
+  }
+  .my-6 {
+    margin-block: calc(var(--spacing) * 6);
+  }
+  .my-7 {
+    margin-block: calc(var(--spacing) * 7);
+  }
+  .my-8 {
+    margin-block: calc(var(--spacing) * 8);
+  }
+  .my-9 {
+    margin-block: calc(var(--spacing) * 9);
+  }
+  .my-10 {
+    margin-block: calc(var(--spacing) * 10);
+  }
+  .my-11 {
+    margin-block: calc(var(--spacing) * 11);
+  }
+  .my-12 {
+    margin-block: calc(var(--spacing) * 12);
+  }
+  .my-13 {
+    margin-block: calc(var(--spacing) * 13);
+  }
+  .my-14 {
+    margin-block: calc(var(--spacing) * 14);
+  }
+  .my-15 {
+    margin-block: calc(var(--spacing) * 15);
+  }
+  .my-16 {
+    margin-block: calc(var(--spacing) * 16);
+  }
+  .my-17 {
+    margin-block: calc(var(--spacing) * 17);
+  }
+  .my-18 {
+    margin-block: calc(var(--spacing) * 18);
+  }
+  .my-19 {
+    margin-block: calc(var(--spacing) * 19);
+  }
+  .my-20 {
+    margin-block: calc(var(--spacing) * 20);
+  }
+  .my-21 {
+    margin-block: calc(var(--spacing) * 21);
+  }
+  .my-22 {
+    margin-block: calc(var(--spacing) * 22);
+  }
+  .my-23 {
+    margin-block: calc(var(--spacing) * 23);
+  }
+  .my-24 {
+    margin-block: calc(var(--spacing) * 24);
+  }
+  .my-25 {
+    margin-block: calc(var(--spacing) * 25);
+  }
+  .my-\[-4rem\] {
+    margin-block: -4rem;
+  }
+  .my-\[4\.5rem\] {
+    margin-block: 4.5rem;
+  }
+  .my-auto {
+    margin-block: auto;
+  }
+  .ms-0 {
+    margin-inline-start: calc(var(--spacing) * 0);
+  }
+  .ms-1 {
+    margin-inline-start: calc(var(--spacing) * 1);
+  }
+  .ms-2 {
+    margin-inline-start: calc(var(--spacing) * 2);
+  }
+  .ms-3 {
+    margin-inline-start: calc(var(--spacing) * 3);
+  }
+  .ms-4 {
+    margin-inline-start: calc(var(--spacing) * 4);
+  }
+  .ms-5 {
+    margin-inline-start: calc(var(--spacing) * 5);
+  }
+  .ms-6 {
+    margin-inline-start: calc(var(--spacing) * 6);
+  }
+  .ms-7 {
+    margin-inline-start: calc(var(--spacing) * 7);
+  }
+  .ms-8 {
+    margin-inline-start: calc(var(--spacing) * 8);
+  }
+  .ms-9 {
+    margin-inline-start: calc(var(--spacing) * 9);
+  }
+  .ms-10 {
+    margin-inline-start: calc(var(--spacing) * 10);
+  }
+  .ms-11 {
+    margin-inline-start: calc(var(--spacing) * 11);
+  }
+  .ms-12 {
+    margin-inline-start: calc(var(--spacing) * 12);
+  }
+  .ms-13 {
+    margin-inline-start: calc(var(--spacing) * 13);
+  }
+  .ms-14 {
+    margin-inline-start: calc(var(--spacing) * 14);
+  }
+  .ms-15 {
+    margin-inline-start: calc(var(--spacing) * 15);
+  }
+  .ms-16 {
+    margin-inline-start: calc(var(--spacing) * 16);
+  }
+  .ms-17 {
+    margin-inline-start: calc(var(--spacing) * 17);
+  }
+  .ms-18 {
+    margin-inline-start: calc(var(--spacing) * 18);
+  }
+  .ms-19 {
+    margin-inline-start: calc(var(--spacing) * 19);
+  }
+  .ms-20 {
+    margin-inline-start: calc(var(--spacing) * 20);
+  }
+  .ms-21 {
+    margin-inline-start: calc(var(--spacing) * 21);
+  }
+  .ms-22 {
+    margin-inline-start: calc(var(--spacing) * 22);
+  }
+  .ms-23 {
+    margin-inline-start: calc(var(--spacing) * 23);
+  }
+  .ms-24 {
+    margin-inline-start: calc(var(--spacing) * 24);
+  }
+  .ms-25 {
+    margin-inline-start: calc(var(--spacing) * 25);
+  }
+  .ms-auto {
+    margin-inline-start: auto;
+  }
+  .me-0 {
+    margin-inline-end: calc(var(--spacing) * 0);
+  }
+  .me-1 {
+    margin-inline-end: calc(var(--spacing) * 1);
+  }
+  .me-2 {
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
+  .me-3 {
+    margin-inline-end: calc(var(--spacing) * 3);
+  }
+  .me-4 {
+    margin-inline-end: calc(var(--spacing) * 4);
+  }
+  .me-5 {
+    margin-inline-end: calc(var(--spacing) * 5);
+  }
+  .me-6 {
+    margin-inline-end: calc(var(--spacing) * 6);
+  }
+  .me-7 {
+    margin-inline-end: calc(var(--spacing) * 7);
+  }
+  .me-8 {
+    margin-inline-end: calc(var(--spacing) * 8);
+  }
+  .me-9 {
+    margin-inline-end: calc(var(--spacing) * 9);
+  }
+  .me-10 {
+    margin-inline-end: calc(var(--spacing) * 10);
+  }
+  .me-11 {
+    margin-inline-end: calc(var(--spacing) * 11);
+  }
+  .me-12 {
+    margin-inline-end: calc(var(--spacing) * 12);
+  }
+  .me-13 {
+    margin-inline-end: calc(var(--spacing) * 13);
+  }
+  .me-14 {
+    margin-inline-end: calc(var(--spacing) * 14);
+  }
+  .me-15 {
+    margin-inline-end: calc(var(--spacing) * 15);
+  }
+  .me-16 {
+    margin-inline-end: calc(var(--spacing) * 16);
+  }
+  .me-17 {
+    margin-inline-end: calc(var(--spacing) * 17);
+  }
+  .me-18 {
+    margin-inline-end: calc(var(--spacing) * 18);
+  }
+  .me-19 {
+    margin-inline-end: calc(var(--spacing) * 19);
+  }
+  .me-20 {
+    margin-inline-end: calc(var(--spacing) * 20);
+  }
+  .me-21 {
+    margin-inline-end: calc(var(--spacing) * 21);
+  }
+  .me-22 {
+    margin-inline-end: calc(var(--spacing) * 22);
+  }
+  .me-23 {
+    margin-inline-end: calc(var(--spacing) * 23);
+  }
+  .me-24 {
+    margin-inline-end: calc(var(--spacing) * 24);
+  }
+  .me-25 {
+    margin-inline-end: calc(var(--spacing) * 25);
+  }
+  .me-auto {
+    margin-inline-end: auto;
+  }
+  .\!mt-0 {
+    margin-top: calc(var(--spacing) * 0) !important;
+  }
+  .\!mt-1 {
+    margin-top: calc(var(--spacing) * 1) !important;
+  }
+  .\!mt-2 {
+    margin-top: calc(var(--spacing) * 2) !important;
+  }
+  .\!mt-3 {
+    margin-top: calc(var(--spacing) * 3) !important;
+  }
+  .\!mt-4 {
+    margin-top: calc(var(--spacing) * 4) !important;
+  }
+  .\!mt-5 {
+    margin-top: calc(var(--spacing) * 5) !important;
+  }
+  .\!mt-6 {
+    margin-top: calc(var(--spacing) * 6) !important;
+  }
+  .\!mt-7 {
+    margin-top: calc(var(--spacing) * 7) !important;
+  }
+  .\!mt-8 {
+    margin-top: calc(var(--spacing) * 8) !important;
+  }
+  .\!mt-9 {
+    margin-top: calc(var(--spacing) * 9) !important;
+  }
+  .\!mt-10 {
+    margin-top: calc(var(--spacing) * 10) !important;
+  }
+  .\!mt-12 {
+    margin-top: calc(var(--spacing) * 12) !important;
+  }
+  .\!mt-13 {
+    margin-top: calc(var(--spacing) * 13) !important;
+  }
+  .\!mt-15 {
+    margin-top: calc(var(--spacing) * 15) !important;
+  }
+  .\!mt-\[-0\.05rem\] {
+    margin-top: -0.05rem !important;
+  }
+  .\!mt-\[-0\.5rem\] {
+    margin-top: -0.5rem !important;
+  }
+  .\!mt-\[-0\.25rem\] {
+    margin-top: -0.25rem !important;
+  }
+  .\!mt-\[-1\.25rem\] {
+    margin-top: -1.25rem !important;
+  }
+  .\!mt-\[-2\.5rem\] {
+    margin-top: -2.5rem !important;
+  }
+  .\!mt-\[-2rem\] {
+    margin-top: -2rem !important;
+  }
+  .\!mt-\[-50px\] {
+    margin-top: -50px !important;
+  }
+  .\!mt-\[-5rem\] {
+    margin-top: -5rem !important;
+  }
+  .\!mt-\[-60px\] {
+    margin-top: -60px !important;
+  }
+  .\!mt-\[-6rem\] {
+    margin-top: -6rem !important;
+  }
+  .\!mt-\[-70px\] {
+    margin-top: -70px !important;
+  }
+  .\!mt-\[-7rem\] {
+    margin-top: -7rem !important;
+  }
+  .\!mt-\[-80px\] {
+    margin-top: -80px !important;
+  }
+  .\!mt-\[-8rem\] {
+    margin-top: -8rem !important;
+  }
+  .\!mt-\[-9rem\] {
+    margin-top: -9rem !important;
+  }
+  .\!mt-\[-10px\] {
+    margin-top: -10px !important;
+  }
+  .\!mt-\[-10rem\] {
+    margin-top: -10rem !important;
+  }
+  .\!mt-\[-12\.5rem\] {
+    margin-top: -12.5rem !important;
+  }
+  .\!mt-\[-15px\] {
+    margin-top: -15px !important;
+  }
+  .\!mt-\[-15rem\] {
+    margin-top: -15rem !important;
+  }
+  .\!mt-\[-20px\] {
+    margin-top: -20px !important;
+  }
+  .\!mt-\[-25px\] {
+    margin-top: -25px !important;
+  }
+  .\!mt-\[-30px\] {
+    margin-top: -30px !important;
+  }
+  .\!mt-\[-40px\] {
+    margin-top: -40px !important;
+  }
+  .\!mt-\[-45px\] {
+    margin-top: -45px !important;
+  }
+  .\!mt-\[\.25rem\] {
+    margin-top: .25rem !important;
+  }
+  .\!mt-\[\.35rem\] {
+    margin-top: .35rem !important;
+  }
+  .\!mt-\[0\.2rem\] {
+    margin-top: 0.2rem !important;
+  }
+  .\!mt-\[0\.35rem\] {
+    margin-top: 0.35rem !important;
+  }
+  .\!mt-\[10px\] {
+    margin-top: 10px !important;
+  }
+  .\!mt-\[15px\] {
+    margin-top: 15px !important;
+  }
+  .\!mt-\[1rem\] {
+    margin-top: 1rem !important;
+  }
+  .\!mt-\[20px\] {
+    margin-top: 20px !important;
+  }
+  .\!mt-\[25px\] {
+    margin-top: 25px !important;
+  }
+  .\!mt-\[2rem\] {
+    margin-top: 2rem !important;
+  }
+  .\!mt-\[3\.5rem\] {
+    margin-top: 3.5rem !important;
+  }
+  .\!mt-\[30px\] {
+    margin-top: 30px !important;
+  }
+  .\!mt-\[3rem\] {
+    margin-top: 3rem !important;
+  }
+  .\!mt-\[4\.5rem\] {
+    margin-top: 4.5rem !important;
+  }
+  .\!mt-\[40px\] {
+    margin-top: 40px !important;
+  }
+  .\!mt-\[45px\] {
+    margin-top: 45px !important;
+  }
+  .\!mt-\[4rem\] {
+    margin-top: 4rem !important;
+  }
+  .\!mt-\[50px\] {
+    margin-top: 50px !important;
+  }
+  .\!mt-\[60px\] {
+    margin-top: 60px !important;
+  }
+  .\!mt-\[70px\] {
+    margin-top: 70px !important;
+  }
+  .\!mt-\[7rem\] {
+    margin-top: 7rem !important;
+  }
+  .\!mt-\[80px\] {
+    margin-top: 80px !important;
+  }
+  .\!mt-auto {
+    margin-top: auto !important;
+  }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .mt-7 {
+    margin-top: calc(var(--spacing) * 7);
+  }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+  .mt-9 {
+    margin-top: calc(var(--spacing) * 9);
+  }
+  .mt-10 {
+    margin-top: calc(var(--spacing) * 10);
+  }
+  .mt-11 {
+    margin-top: calc(var(--spacing) * 11);
+  }
+  .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
+  }
+  .mt-13 {
+    margin-top: calc(var(--spacing) * 13);
+  }
+  .mt-14 {
+    margin-top: calc(var(--spacing) * 14);
+  }
+  .mt-15 {
+    margin-top: calc(var(--spacing) * 15);
+  }
+  .mt-16 {
+    margin-top: calc(var(--spacing) * 16);
+  }
+  .mt-17 {
+    margin-top: calc(var(--spacing) * 17);
+  }
+  .mt-18 {
+    margin-top: calc(var(--spacing) * 18);
+  }
+  .mt-19 {
+    margin-top: calc(var(--spacing) * 19);
+  }
+  .mt-20 {
+    margin-top: calc(var(--spacing) * 20);
+  }
+  .mt-21 {
+    margin-top: calc(var(--spacing) * 21);
+  }
+  .mt-22 {
+    margin-top: calc(var(--spacing) * 22);
+  }
+  .mt-23 {
+    margin-top: calc(var(--spacing) * 23);
+  }
+  .mt-24 {
+    margin-top: calc(var(--spacing) * 24);
+  }
+  .mt-25 {
+    margin-top: calc(var(--spacing) * 25);
+  }
+  .mt-\[-30px\] {
+    margin-top: -30px;
+  }
+  .mt-\[30px\] {
+    margin-top: 30px;
+  }
+  .mt-\[3rem\] {
+    margin-top: 3rem;
+  }
+  .mt-auto {
+    margin-top: auto;
+  }
+  .\!mr-0 {
+    margin-right: calc(var(--spacing) * 0) !important;
+  }
+  .\!mr-1 {
+    margin-right: calc(var(--spacing) * 1) !important;
+  }
+  .\!mr-2 {
+    margin-right: calc(var(--spacing) * 2) !important;
+  }
+  .\!mr-3 {
+    margin-right: calc(var(--spacing) * 3) !important;
+  }
+  .\!mr-4 {
+    margin-right: calc(var(--spacing) * 4) !important;
+  }
+  .\!mr-5 {
+    margin-right: calc(var(--spacing) * 5) !important;
+  }
+  .\!mr-6 {
+    margin-right: calc(var(--spacing) * 6) !important;
+  }
+  .\!mr-\[-\.5rem\] {
+    margin-right: -.5rem !important;
+  }
+  .\!mr-\[-0\.5rem\] {
+    margin-right: -0.5rem !important;
+  }
+  .\!mr-\[-0\.75rem\] {
+    margin-right: -0.75rem !important;
+  }
+  .\!mr-\[\.3rem\] {
+    margin-right: .3rem !important;
+  }
+  .\!mr-\[\.5rem\] {
+    margin-right: .5rem !important;
+  }
+  .\!mr-\[\.25rem\] {
+    margin-right: .25rem !important;
+  }
+  .\!mr-\[\.75rem\] {
+    margin-right: .75rem !important;
+  }
+  .\!mr-\[0\.2rem\] {
+    margin-right: 0.2rem !important;
+  }
+  .\!mr-\[0\.3rem\] {
+    margin-right: 0.3rem !important;
+  }
+  .\!mr-\[0\.6rem\] {
+    margin-right: 0.6rem !important;
+  }
+  .\!mr-\[1\.25rem\] {
+    margin-right: 1.25rem !important;
+  }
+  .\!mr-auto {
+    margin-right: auto !important;
+  }
+  .mr-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
+  .mr-5 {
+    margin-right: calc(var(--spacing) * 5);
+  }
+  .mr-8 {
+    margin-right: calc(var(--spacing) * 8);
+  }
+  .\!mb-0 {
+    margin-bottom: calc(var(--spacing) * 0) !important;
+  }
+  .\!mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5) !important;
+  }
+  .\!mb-1 {
+    margin-bottom: calc(var(--spacing) * 1) !important;
+  }
+  .\!mb-2 {
+    margin-bottom: calc(var(--spacing) * 2) !important;
+  }
+  .\!mb-3 {
+    margin-bottom: calc(var(--spacing) * 3) !important;
+  }
+  .\!mb-4 {
+    margin-bottom: calc(var(--spacing) * 4) !important;
+  }
+  .\!mb-5 {
+    margin-bottom: calc(var(--spacing) * 5) !important;
+  }
+  .\!mb-6 {
+    margin-bottom: calc(var(--spacing) * 6) !important;
+  }
+  .\!mb-7 {
+    margin-bottom: calc(var(--spacing) * 7) !important;
+  }
+  .\!mb-8 {
+    margin-bottom: calc(var(--spacing) * 8) !important;
+  }
+  .\!mb-9 {
+    margin-bottom: calc(var(--spacing) * 9) !important;
+  }
+  .\!mb-10 {
+    margin-bottom: calc(var(--spacing) * 10) !important;
+  }
+  .\!mb-12 {
+    margin-bottom: calc(var(--spacing) * 12) !important;
+  }
+  .\!mb-14 {
+    margin-bottom: calc(var(--spacing) * 14) !important;
+  }
+  .\!mb-16 {
+    margin-bottom: calc(var(--spacing) * 16) !important;
+  }
+  .\!mb-20 {
+    margin-bottom: calc(var(--spacing) * 20) !important;
+  }
+  .\!mb-24 {
+    margin-bottom: calc(var(--spacing) * 24) !important;
+  }
+  .\!mb-36 {
+    margin-bottom: calc(var(--spacing) * 36) !important;
+  }
+  .\!mb-40 {
+    margin-bottom: calc(var(--spacing) * 40) !important;
+  }
+  .\!mb-\[-0\.5rem\] {
+    margin-bottom: -0.5rem !important;
+  }
+  .\!mb-\[-1\.25rem\] {
+    margin-bottom: -1.25rem !important;
+  }
+  .\!mb-\[-2\.5rem\] {
+    margin-bottom: -2.5rem !important;
+  }
+  .\!mb-\[-3\.5rem\] {
+    margin-bottom: -3.5rem !important;
+  }
+  .\!mb-\[-8rem\] {
+    margin-bottom: -8rem !important;
+  }
+  .\!mb-\[-10rem\] {
+    margin-bottom: -10rem !important;
+  }
+  .\!mb-\[-12\.5rem\] {
+    margin-bottom: -12.5rem !important;
+  }
+  .\!mb-\[\.4rem\] {
+    margin-bottom: .4rem !important;
+  }
+  .\!mb-\[\.5rem\] {
+    margin-bottom: .5rem !important;
+  }
+  .\!mb-\[\.9rem\] {
+    margin-bottom: .9rem !important;
+  }
+  .\!mb-\[\.25rem\] {
+    margin-bottom: .25rem !important;
+  }
+  .\!mb-\[\.75rem\] {
+    margin-bottom: .75rem !important;
+  }
+  .\!mb-\[0\.2rem\] {
+    margin-bottom: 0.2rem !important;
+  }
+  .\!mb-\[0\.45rem\] {
+    margin-bottom: 0.45rem !important;
+  }
+  .\!mb-\[0\.4rem\] {
+    margin-bottom: 0.4rem !important;
+  }
+  .\!mb-\[0\.75rem\] {
+    margin-bottom: 0.75rem !important;
+  }
+  .\!mb-\[1\.5rem\] {
+    margin-bottom: 1.5rem !important;
+  }
+  .\!mb-\[1\.25rem\] {
+    margin-bottom: 1.25rem !important;
+  }
+  .\!mb-\[1\.75rem\] {
+    margin-bottom: 1.75rem !important;
+  }
+  .\!mb-\[3\.5rem\] {
+    margin-bottom: 3.5rem !important;
+  }
+  .\!mb-\[4\.5rem\] {
+    margin-bottom: 4.5rem !important;
+  }
+  .\!mb-\[4rem\] {
+    margin-bottom: 4rem !important;
+  }
+  .\!mb-\[5rem\] {
+    margin-bottom: 5rem !important;
+  }
+  .\!mb-\[6rem\] {
+    margin-bottom: 6rem !important;
+  }
+  .\!mb-\[7rem\] {
+    margin-bottom: 7rem !important;
+  }
+  .\!mb-\[8rem\] {
+    margin-bottom: 8rem !important;
+  }
+  .\!mb-\[10\] {
+    margin-bottom: 10 !important;
+  }
+  .\!mb-\[10rem\] {
+    margin-bottom: 10rem !important;
+  }
+  .\!mb-\[1rem\] {
+    margin-bottom: 1rem !important;
+  }
+  .\!mb-\[2\.5rem\] {
+    margin-bottom: 2.5rem !important;
+  }
+  .\!mb-\[9rem\] {
+    margin-bottom: 9rem !important;
+  }
+  .\!mb-\[20px\] {
+    margin-bottom: 20px !important;
+  }
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .mb-7 {
+    margin-bottom: calc(var(--spacing) * 7);
+  }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  .mb-9 {
+    margin-bottom: calc(var(--spacing) * 9);
+  }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
+  .mb-11 {
+    margin-bottom: calc(var(--spacing) * 11);
+  }
+  .mb-12 {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
+  .mb-13 {
+    margin-bottom: calc(var(--spacing) * 13);
+  }
+  .mb-14 {
+    margin-bottom: calc(var(--spacing) * 14);
+  }
+  .mb-15 {
+    margin-bottom: calc(var(--spacing) * 15);
+  }
+  .mb-16 {
+    margin-bottom: calc(var(--spacing) * 16);
+  }
+  .mb-17 {
+    margin-bottom: calc(var(--spacing) * 17);
+  }
+  .mb-18 {
+    margin-bottom: calc(var(--spacing) * 18);
+  }
+  .mb-19 {
+    margin-bottom: calc(var(--spacing) * 19);
+  }
+  .mb-20 {
+    margin-bottom: calc(var(--spacing) * 20);
+  }
+  .mb-21 {
+    margin-bottom: calc(var(--spacing) * 21);
+  }
+  .mb-22 {
+    margin-bottom: calc(var(--spacing) * 22);
+  }
+  .mb-23 {
+    margin-bottom: calc(var(--spacing) * 23);
+  }
+  .mb-24 {
+    margin-bottom: calc(var(--spacing) * 24);
+  }
+  .mb-25 {
+    margin-bottom: calc(var(--spacing) * 25);
+  }
+  .mb-auto {
+    margin-bottom: auto;
+  }
+  .\!ml-0 {
+    margin-left: calc(var(--spacing) * 0) !important;
+  }
+  .\!ml-1 {
+    margin-left: calc(var(--spacing) * 1) !important;
+  }
+  .\!ml-4 {
+    margin-left: calc(var(--spacing) * 4) !important;
+  }
+  .\!ml-\[-1\.25rem\] {
+    margin-left: -1.25rem !important;
+  }
+  .\!ml-\[\.3rem\] {
+    margin-left: .3rem !important;
+  }
+  .\!ml-\[\.5rem\] {
+    margin-left: .5rem !important;
+  }
+  .\!ml-\[\.8rem\] {
+    margin-left: .8rem !important;
+  }
+  .\!ml-\[0\.3rem\] {
+    margin-left: 0.3rem !important;
+  }
+  .\!ml-\[0\.05rem\] {
+    margin-left: 0.05rem !important;
+  }
+  .\!ml-\[0\.15rem\] {
+    margin-left: 0.15rem !important;
+  }
+  .\!ml-\[1rem\] {
+    margin-left: 1rem !important;
+  }
+  .\!ml-\[4\.25rem\] {
+    margin-left: 4.25rem !important;
+  }
+  .\!ml-\[8\.33333333\%\] {
+    margin-left: 8.33333333% !important;
+  }
+  .\!ml-auto {
+    margin-left: auto !important;
+  }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .\!box-content {
+    box-sizing: content-box !important;
+  }
+  .box-border {
+    box-sizing: border-box;
+  }
+  .box-content {
+    box-sizing: content-box;
+  }
+  .line-clamp-none {
+    overflow: visible;
+    display: block;
+    -webkit-box-orient: horizontal;
+    -webkit-line-clamp: unset;
+  }
+  .\!block {
+    display: block !important;
+  }
+  .\!flex {
+    display: flex !important;
+  }
+  .\!hidden {
+    display: none !important;
+  }
+  .\!inline-block {
+    display: inline-block !important;
+  }
+  .\!inline-flex {
+    display: inline-flex !important;
+  }
+  .block {
+    display: block;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .flow-root {
+    display: flow-root;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .inline-grid {
+    display: inline-grid;
+  }
+  .inline-table {
+    display: inline-table;
+  }
+  .list-item {
+    display: list-item;
+  }
+  .table {
+    display: table;
+  }
+  .table-caption {
+    display: table-caption;
+  }
+  .table-cell {
+    display: table-cell;
+  }
+  .table-column {
+    display: table-column;
+  }
+  .table-column-group {
+    display: table-column-group;
+  }
+  .table-footer-group {
+    display: table-footer-group;
+  }
+  .table-header-group {
+    display: table-header-group;
+  }
+  .table-row {
+    display: table-row;
+  }
+  .table-row-group {
+    display: table-row-group;
+  }
+  .field-sizing-content {
+    field-sizing: content;
+  }
+  .field-sizing-fixed {
+    field-sizing: fixed;
+  }
+  .aspect-auto {
+    aspect-ratio: auto;
+  }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
+  .size-1 {
+    width: calc(var(--spacing) * 1);
+    height: calc(var(--spacing) * 1);
+  }
+  .\!h-4 {
+    height: calc(var(--spacing) * 4) !important;
+  }
+  .\!h-9 {
+    height: calc(var(--spacing) * 9) !important;
+  }
+  .\!h-10 {
+    height: calc(var(--spacing) * 10) !important;
+  }
+  .\!h-12 {
+    height: calc(var(--spacing) * 12) !important;
+  }
+  .\!h-\[1\.8rem\] {
+    height: 1.8rem !important;
+  }
+  .\!h-\[2\.2rem\] {
+    height: 2.2rem !important;
+  }
+  .\!h-\[2\.5rem\] {
+    height: 2.5rem !important;
+  }
+  .\!h-\[2\.6rem\] {
+    height: 2.6rem !important;
+  }
+  .\!h-\[3\.5rem\] {
+    height: 3.5rem !important;
+  }
+  .\!h-\[3rem\] {
+    height: 3rem !important;
+  }
+  .\!h-\[4\.5rem\] {
+    height: 4.5rem !important;
+  }
+  .\!h-\[4\.25rem\] {
+    height: 4.25rem !important;
+  }
+  .\!h-\[4rem\] {
+    height: 4rem !important;
+  }
+  .\!h-\[5rem\] {
+    height: 5rem !important;
+  }
+  .\!h-\[6rem\] {
+    height: 6rem !important;
+  }
+  .\!h-\[7rem\] {
+    height: 7rem !important;
+  }
+  .\!h-\[8rem\] {
+    height: 8rem !important;
+  }
+  .\!h-\[9rem\] {
+    height: 9rem !important;
+  }
+  .\!h-\[10rem\] {
+    height: 10rem !important;
+  }
+  .\!h-\[12\.5rem\] {
+    height: 12.5rem !important;
+  }
+  .\!h-\[750px\] {
+    height: 750px !important;
+  }
+  .\!h-auto {
+    height: auto !important;
+  }
+  .\!h-full {
+    height: 100% !important;
+  }
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .h-75 {
+    height: calc(var(--spacing) * 75);
+  }
+  .h-100 {
+    height: calc(var(--spacing) * 100);
+  }
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+  .h-13 {
+    height: calc(var(--spacing) * 13);
+  }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+  .h-15 {
+    height: calc(var(--spacing) * 15);
+  }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+  .h-17 {
+    height: calc(var(--spacing) * 17);
+  }
+  .h-18 {
+    height: calc(var(--spacing) * 18);
+  }
+  .h-19 {
+    height: calc(var(--spacing) * 19);
+  }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
+  .h-21 {
+    height: calc(var(--spacing) * 21);
+  }
+  .h-22 {
+    height: calc(var(--spacing) * 22);
+  }
+  .h-23 {
+    height: calc(var(--spacing) * 23);
+  }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+  .h-25 {
+    height: calc(var(--spacing) * 25);
+  }
+  .h-50 {
+    height: calc(var(--spacing) * 50);
+  }
+  .h-\[0\.8rem\] {
+    height: 0.8rem;
+  }
+  .h-\[0\.9rem\] {
+    height: 0.9rem;
+  }
+  .h-\[1\.8rem\] {
+    height: 1.8rem;
+  }
+  .h-\[2\.2rem\] {
+    height: 2.2rem;
+  }
+  .h-\[2\.3rem\] {
+    height: 2.3rem;
+  }
+  .h-\[3\.5rem\] {
+    height: 3.5rem;
+  }
+  .h-\[4\.5rem\] {
+    height: 4.5rem;
+  }
+  .h-\[30rem\] {
+    height: 30rem;
+  }
+  .h-\[3rem\] {
+    height: 3rem;
+  }
+  .h-\[4\.25rem\] {
+    height: 4.25rem;
+  }
+  .h-\[calc\(2\.5rem_\+_2px\)\] {
+    height: calc(2.5rem + 2px);
+  }
+  .h-auto {
+    height: auto;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .h-screen {
+    height: 100vh;
+  }
+  .max-h-none {
+    max-height: none;
+  }
+  .max-h-screen {
+    max-height: 100vh;
+  }
+  .min-h-\[1\.36rem\] {
+    min-height: 1.36rem;
+  }
+  .min-h-\[15rem\] {
+    min-height: 15rem;
+  }
+  .min-h-\[25rem\] {
+    min-height: 25rem;
+  }
+  .min-h-\[30vh\] {
+    min-height: 30vh;
+  }
+  .min-h-\[50vh\] {
+    min-height: 50vh;
+  }
+  .min-h-\[60vh\] {
+    min-height: 60vh;
+  }
+  .min-h-\[70vh\] {
+    min-height: 70vh;
+  }
+  .min-h-\[80vh\] {
+    min-height: 80vh;
+  }
+  .min-h-\[calc\(1\.7em_\+_0\.8rem_\+_2px\)\] {
+    min-height: calc(1.7em + 0.8rem + 2px);
+  }
+  .min-h-\[calc\(2\.5rem_\+_2px\)\] {
+    min-height: calc(2.5rem + 2px);
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .\!w-4 {
+    width: calc(var(--spacing) * 4) !important;
+  }
+  .\!w-9 {
+    width: calc(var(--spacing) * 9) !important;
+  }
+  .\!w-10 {
+    width: calc(var(--spacing) * 10) !important;
+  }
+  .\!w-10\/12 {
+    width: calc(10/12 * 100%) !important;
+  }
+  .\!w-12 {
+    width: calc(var(--spacing) * 12) !important;
+  }
+  .\!w-\[1\.8rem\] {
+    width: 1.8rem !important;
+  }
+  .\!w-\[2\.2rem\] {
+    width: 2.2rem !important;
+  }
+  .\!w-\[2\.5rem\] {
+    width: 2.5rem !important;
+  }
+  .\!w-\[2\.6rem\] {
+    width: 2.6rem !important;
+  }
+  .\!w-\[3\.5rem\] {
+    width: 3.5rem !important;
+  }
+  .\!w-\[3rem\] {
+    width: 3rem !important;
+  }
+  .\!w-\[4rem\] {
+    width: 4rem !important;
+  }
+  .\!w-\[5rem\] {
+    width: 5rem !important;
+  }
+  .\!w-\[6rem\] {
+    width: 6rem !important;
+  }
+  .\!w-\[7rem\] {
+    width: 7rem !important;
+  }
+  .\!w-\[8\.5rem\] {
+    width: 8.5rem !important;
+  }
+  .\!w-\[8rem\] {
+    width: 8rem !important;
+  }
+  .\!w-\[9rem\] {
+    width: 9rem !important;
+  }
+  .\!w-\[10rem\] {
+    width: 10rem !important;
+  }
+  .\!w-\[12\.5rem\] {
+    width: 12.5rem !important;
+  }
+  .\!w-\[22\.5rem\] {
+    width: 22.5rem !important;
+  }
+  .\!w-auto {
+    width: auto !important;
+  }
+  .\!w-full {
+    width: 100% !important;
+  }
+  .w-0 {
+    width: calc(var(--spacing) * 0);
+  }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
+  .w-1\/12 {
+    width: calc(1/12 * 100%);
+  }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
+  .w-3\/12 {
+    width: calc(3/12 * 100%);
+  }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .w-4\/12 {
+    width: calc(4/12 * 100%);
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+  .w-5\/12 {
+    width: calc(5/12 * 100%);
+  }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+  .w-6\/12 {
+    width: calc(6/12 * 100%);
+  }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+  .w-7\/12 {
+    width: calc(7/12 * 100%);
+  }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+  .w-9\/12 {
+    width: calc(9/12 * 100%);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .w-10\/12 {
+    width: calc(10/12 * 100%);
+  }
+  .w-100 {
+    width: calc(var(--spacing) * 100);
+  }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
+  .w-11\/12 {
+    width: calc(11/12 * 100%);
+  }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+  .w-13 {
+    width: calc(var(--spacing) * 13);
+  }
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
+  .w-15 {
+    width: calc(var(--spacing) * 15);
+  }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+  .w-17 {
+    width: calc(var(--spacing) * 17);
+  }
+  .w-18 {
+    width: calc(var(--spacing) * 18);
+  }
+  .w-19 {
+    width: calc(var(--spacing) * 19);
+  }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+  .w-21 {
+    width: calc(var(--spacing) * 21);
+  }
+  .w-22 {
+    width: calc(var(--spacing) * 22);
+  }
+  .w-23 {
+    width: calc(var(--spacing) * 23);
+  }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+  .w-25 {
+    width: calc(var(--spacing) * 25);
+  }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+  .w-50 {
+    width: calc(var(--spacing) * 50);
+  }
+  .w-75 {
+    width: calc(var(--spacing) * 75);
+  }
+  .w-\[0\.6rem\] {
+    width: 0.6rem;
+  }
+  .w-\[0\.9rem\] {
+    width: 0.9rem;
+  }
+  .w-\[1\.8rem\] {
+    width: 1.8rem;
+  }
+  .w-\[2\.2rem\] {
+    width: 2.2rem;
+  }
+  .w-\[2\.3rem\] {
+    width: 2.3rem;
+  }
+  .w-\[3\.5rem\] {
+    width: 3.5rem;
+  }
+  .w-\[3rem\] {
+    width: 3rem;
+  }
+  .w-\[8\.5rem\] {
+    width: 8.5rem;
+  }
+  .w-auto {
+    width: auto;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .w-screen {
+    width: 100vw;
+  }
+  .\!max-w-full {
+    max-width: 100% !important;
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .max-w-none {
+    max-width: none;
+  }
+  .max-w-screen {
+    max-width: 100vw;
+  }
+  .\!min-w-\[2\.5rem\] {
+    min-width: 2.5rem !important;
+  }
+  .min-w-screen {
+    min-width: 100vw;
+  }
+  .flex-\[0_0_auto\] {
+    flex: 0 0 auto;
+  }
+  .flex-\[1_0_0\%\] {
+    flex: 1 0 0%;
+  }
+  .flex-\[1_1_auto\] {
+    flex: 1 1 auto;
+  }
+  .flex-auto {
+    flex: auto;
+  }
+  .flex-initial {
+    flex: 0 auto;
+  }
+  .flex-none {
+    flex: none;
+  }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  .flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .shrink {
+    flex-shrink: 1;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .flex-grow {
+    flex-grow: 1;
+  }
+  .flex-grow-0 {
+    flex-grow: 0;
+  }
+  .flex-grow-1 {
+    flex-grow: 1;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .basis-auto {
+    flex-basis: auto;
+  }
+  .basis-full {
+    flex-basis: 100%;
+  }
+  .table-auto {
+    table-layout: auto;
+  }
+  .table-fixed {
+    table-layout: fixed;
+  }
+  .caption-bottom {
+    caption-side: bottom;
+  }
+  .caption-top {
+    caption-side: top;
+  }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .border-separate {
+    border-collapse: separate;
+  }
+  .origin-\[0_0\] {
+    transform-origin: 0 0;
+  }
+  .origin-bottom {
+    transform-origin: bottom;
+  }
+  .origin-bottom-left {
+    transform-origin: bottom left;
+  }
+  .origin-bottom-right {
+    transform-origin: bottom right;
+  }
+  .origin-center {
+    transform-origin: center;
+  }
+  .origin-left {
+    transform-origin: left;
+  }
+  .origin-right {
+    transform-origin: right;
+  }
+  .origin-top {
+    transform-origin: top;
+  }
+  .origin-top-left {
+    transform-origin: top left;
+  }
+  .origin-top-right {
+    transform-origin: top right;
+  }
+  .-translate-full {
+    --tw-translate-x: -100%;
+    --tw-translate-y: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-full {
+    --tw-translate-x: 100%;
+    --tw-translate-y: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .\!translate-y-0 {
+    --tw-translate-y: calc(var(--spacing) * 0) !important;
+    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+  }
+  .-translate-y-2\/4 {
+    --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-0 {
+    --tw-translate-y: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-3 {
+    --tw-translate-y: calc(var(--spacing) * 3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[-80\%\] {
+    --tw-translate-y: -80%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-z-px {
+    --tw-translate-z: -1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+  }
+  .-translate-z-px {
+    --tw-translate-z: -1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+  }
+  .translate-3d {
+    translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+  }
+  .translate-none {
+    translate: none;
+  }
+  .translate-z-px {
+    --tw-translate-z: 1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+  }
+  .translate-z-px {
+    --tw-translate-z: 1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+  }
+  .scale-3d {
+    scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
+  }
+  .scale-none {
+    scale: none;
+  }
+  .rotate-360 {
+    rotate: 360deg;
+  }
+  .rotate-none {
+    rotate: none;
+  }
+  .transform {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
+  .transform-cpu {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
+  .transform-gpu {
+    transform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
+  .transform-none {
+    transform: none;
+  }
+  .animate-none {
+    animation: none;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .touch-pinch-zoom {
+    --tw-pinch-zoom: pinch-zoom;
+    touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);
+  }
+  .resize {
+    resize: both;
+  }
+  .resize-none {
+    resize: none;
+  }
+  .resize-x {
+    resize: horizontal;
+  }
+  .resize-y {
+    resize: vertical;
+  }
+  .snap-none {
+    scroll-snap-type: none;
+  }
+  .snap-mandatory {
+    --tw-scroll-snap-strictness: mandatory;
+  }
+  .snap-proximity {
+    --tw-scroll-snap-strictness: proximity;
+  }
+  .snap-align-none {
+    scroll-snap-align: none;
+  }
+  .snap-center {
+    scroll-snap-align: center;
+  }
+  .snap-end {
+    scroll-snap-align: end;
+  }
+  .snap-start {
+    scroll-snap-align: start;
+  }
+  .snap-always {
+    scroll-snap-stop: always;
+  }
+  .snap-normal {
+    scroll-snap-stop: normal;
+  }
+  .list-inside {
+    list-style-position: inside;
+  }
+  .list-outside {
+    list-style-position: outside;
+  }
+  .\!list-none {
+    list-style-type: none !important;
+  }
+  .list-decimal {
+    list-style-type: decimal;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
+  .list-none {
+    list-style-type: none;
+  }
+  .list-image-none {
+    list-style-image: none;
+  }
+  .appearance-auto {
+    appearance: auto;
+  }
+  .appearance-none {
+    appearance: none;
+  }
+  .columns-auto {
+    columns: auto;
+  }
+  .auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+  .auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+  .auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+  .auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+  .grid-flow-col {
+    grid-auto-flow: column;
+  }
+  .grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+  .grid-flow-dense {
+    grid-auto-flow: dense;
+  }
+  .grid-flow-row {
+    grid-auto-flow: row;
+  }
+  .grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+  .auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+  .auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+  .auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+  .auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .grid-cols-none {
+    grid-template-columns: none;
+  }
+  .grid-cols-subgrid {
+    grid-template-columns: subgrid;
+  }
+  .grid-rows-none {
+    grid-template-rows: none;
+  }
+  .grid-rows-subgrid {
+    grid-template-rows: subgrid;
+  }
+  .\!flex-row {
+    flex-direction: row !important;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .\!flex-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .place-content-around {
+    place-content: space-around;
+  }
+  .place-content-baseline {
+    place-content: baseline;
+  }
+  .place-content-between {
+    place-content: space-between;
+  }
+  .place-content-center {
+    place-content: center;
+  }
+  .place-content-end {
+    place-content: end;
+  }
+  .place-content-evenly {
+    place-content: space-evenly;
+  }
+  .place-content-start {
+    place-content: start;
+  }
+  .place-content-stretch {
+    place-content: stretch;
+  }
+  .place-items-baseline {
+    place-items: baseline;
+  }
+  .place-items-center {
+    place-items: center;
+  }
+  .place-items-end {
+    place-items: end;
+  }
+  .place-items-start {
+    place-items: start;
+  }
+  .place-items-stretch {
+    place-items: stretch;
+  }
+  .content-around {
+    align-content: space-around;
+  }
+  .content-baseline {
+    align-content: baseline;
+  }
+  .content-between {
+    align-content: space-between;
+  }
+  .content-center {
+    align-content: center;
+  }
+  .content-end {
+    align-content: flex-end;
+  }
+  .content-evenly {
+    align-content: space-evenly;
+  }
+  .content-normal {
+    align-content: normal;
+  }
+  .content-start {
+    align-content: flex-start;
+  }
+  .content-stretch {
+    align-content: stretch;
+  }
+  .\!items-center {
+    align-items: center !important;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-end {
+    align-items: flex-end;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .items-stretch {
+    align-items: stretch;
+  }
+  .\!justify-center {
+    justify-content: center !important;
+  }
+  .\!justify-start {
+    justify-content: flex-start !important;
+  }
+  .justify-around {
+    justify-content: space-around;
+  }
+  .justify-baseline {
+    justify-content: baseline;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
+  .justify-normal {
+    justify-content: normal;
+  }
+  .justify-start {
+    justify-content: flex-start;
+  }
+  .justify-stretch {
+    justify-content: stretch;
+  }
+  .justify-items-center {
+    justify-items: center;
+  }
+  .justify-items-end {
+    justify-items: end;
+  }
+  .justify-items-normal {
+    justify-items: normal;
+  }
+  .justify-items-start {
+    justify-items: start;
+  }
+  .justify-items-stretch {
+    justify-items: stretch;
+  }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .gap-7 {
+    gap: calc(var(--spacing) * 7);
+  }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
+  .gap-9 {
+    gap: calc(var(--spacing) * 9);
+  }
+  .gap-10 {
+    gap: calc(var(--spacing) * 10);
+  }
+  .gap-11 {
+    gap: calc(var(--spacing) * 11);
+  }
+  .gap-12 {
+    gap: calc(var(--spacing) * 12);
+  }
+  .gap-13 {
+    gap: calc(var(--spacing) * 13);
+  }
+  .gap-14 {
+    gap: calc(var(--spacing) * 14);
+  }
+  .gap-15 {
+    gap: calc(var(--spacing) * 15);
+  }
+  .gap-16 {
+    gap: calc(var(--spacing) * 16);
+  }
+  .gap-17 {
+    gap: calc(var(--spacing) * 17);
+  }
+  .gap-18 {
+    gap: calc(var(--spacing) * 18);
+  }
+  .gap-19 {
+    gap: calc(var(--spacing) * 19);
+  }
+  .gap-20 {
+    gap: calc(var(--spacing) * 20);
+  }
+  .gap-21 {
+    gap: calc(var(--spacing) * 21);
+  }
+  .gap-22 {
+    gap: calc(var(--spacing) * 22);
+  }
+  .gap-23 {
+    gap: calc(var(--spacing) * 23);
+  }
+  .gap-24 {
+    gap: calc(var(--spacing) * 24);
+  }
+  .gap-25 {
+    gap: calc(var(--spacing) * 25);
+  }
+  .space-y-reverse {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 1;
+    }
+  }
+  .space-x-reverse {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 1;
+    }
+  }
+  .divide-x {
+    :where(& > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
+      border-inline-style: var(--tw-border-style);
+      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
+      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+    }
+  }
+  .divide-y {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
+      border-bottom-style: var(--tw-border-style);
+      border-top-style: var(--tw-border-style);
+      border-top-width: calc(1px * var(--tw-divide-y-reverse));
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+  }
+  .divide-y-reverse {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 1;
+    }
+  }
+  .place-self-auto {
+    place-self: auto;
+  }
+  .place-self-center {
+    place-self: center;
+  }
+  .place-self-end {
+    place-self: end;
+  }
+  .place-self-start {
+    place-self: start;
+  }
+  .place-self-stretch {
+    place-self: stretch;
+  }
+  .\!self-end {
+    align-self: flex-end !important;
+  }
+  .\!self-start {
+    align-self: flex-start !important;
+  }
+  .\!self-stretch {
+    align-self: stretch !important;
+  }
+  .self-auto {
+    align-self: auto;
+  }
+  .self-baseline {
+    align-self: baseline;
+  }
+  .self-center {
+    align-self: center;
+  }
+  .self-end {
+    align-self: flex-end;
+  }
+  .self-start {
+    align-self: flex-start;
+  }
+  .self-stretch {
+    align-self: stretch;
+  }
+  .justify-self-auto {
+    justify-self: auto;
+  }
+  .justify-self-center {
+    justify-self: center;
+  }
+  .justify-self-end {
+    justify-self: flex-end;
+  }
+  .justify-self-start {
+    justify-self: flex-start;
+  }
+  .justify-self-stretch {
+    justify-self: stretch;
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-scroll {
+    overflow: scroll;
+  }
+  .overflow-visible {
+    overflow: visible;
+  }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
+  .overflow-x-scroll {
+    overflow-x: scroll;
+  }
+  .overflow-x-visible {
+    overflow-x: visible;
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
+  .overflow-y-scroll {
+    overflow-y: scroll;
+  }
+  .overflow-y-visible {
+    overflow-y: visible;
+  }
+  .scroll-auto {
+    scroll-behavior: auto;
+  }
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+  .\!rounded-\[\.4rem\] {
+    border-radius: .4rem !important;
+  }
+  .\!rounded-\[\.8rem\] {
+    border-radius: .8rem !important;
+  }
+  .\!rounded-\[0\.4rem\] {
+    border-radius: 0.4rem !important;
+  }
+  .\!rounded-\[0\.8rem\] {
+    border-radius: 0.8rem !important;
+  }
+  .\!rounded-\[50\%\] {
+    border-radius: 50% !important;
+  }
+  .\!rounded-\[50rem\] {
+    border-radius: 50rem !important;
+  }
+  .\!rounded-\[100\%\] {
+    border-radius: 100% !important;
+  }
+  .\!rounded-none {
+    border-radius: 0 !important;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
+  .rounded-\[\.4rem\] {
+    border-radius: .4rem;
+  }
+  .rounded-\[0\.4rem\] {
+    border-radius: 0.4rem;
+  }
+  .rounded-\[0\.8rem\] {
+    border-radius: 0.8rem;
+  }
+  .rounded-\[50\%\] {
+    border-radius: 50%;
+  }
+  .rounded-\[100\%\] {
+    border-radius: 100%;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-none {
+    border-radius: 0;
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .rounded-s {
+    border-start-start-radius: 0.25rem;
+    border-end-start-radius: 0.25rem;
+  }
+  .rounded-ss {
+    border-start-start-radius: 0.25rem;
+  }
+  .rounded-e {
+    border-start-end-radius: 0.25rem;
+    border-end-end-radius: 0.25rem;
+  }
+  .rounded-se {
+    border-start-end-radius: 0.25rem;
+  }
+  .rounded-ee {
+    border-end-end-radius: 0.25rem;
+  }
+  .rounded-es {
+    border-end-start-radius: 0.25rem;
+  }
+  .rounded-l {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+  .rounded-t {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+  .rounded-t-\[0\.4rem\] {
+    border-top-left-radius: 0.4rem;
+    border-top-right-radius: 0.4rem;
+  }
+  .rounded-tl {
+    border-top-left-radius: 0.25rem;
+  }
+  .rounded-r {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+  .rounded-tr {
+    border-top-right-radius: 0.25rem;
+  }
+  .rounded-b {
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+  .rounded-br {
+    border-bottom-right-radius: 0.25rem;
+  }
+  .rounded-br-\[0\.4rem\] {
+    border-bottom-right-radius: 0.4rem;
+  }
+  .rounded-bl {
+    border-bottom-left-radius: 0.25rem;
+  }
+  .rounded-bl-\[0\.4rem\] {
+    border-bottom-left-radius: 0.4rem;
+  }
+  .\!border-0 {
+    border-style: var(--tw-border-style) !important;
+    border-width: 0px !important;
+  }
+  .\!border-\[2px\] {
+    border-style: var(--tw-border-style) !important;
+    border-width: 2px !important;
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .border-1 {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-3 {
+    border-style: var(--tw-border-style);
+    border-width: 3px;
+  }
+  .border-4 {
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+  }
+  .border-5 {
+    border-style: var(--tw-border-style);
+    border-width: 5px;
+  }
+  .border-\[0\.2rem\] {
+    border-style: var(--tw-border-style);
+    border-width: 0.2rem;
+  }
+  .border-x {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
+  .border-y {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 1px;
+  }
+  .border-s {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 1px;
+  }
+  .border-e {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 1px;
+  }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+  .border-l-\[0\.15rem\] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0.15rem;
+  }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .border-dotted {
+    --tw-border-style: dotted;
+    border-style: dotted;
+  }
+  .border-double {
+    --tw-border-style: double;
+    border-style: double;
+  }
+  .border-hidden {
+    --tw-border-style: hidden;
+    border-style: hidden;
+  }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .\!border-\[\#1b1e23\] {
+    border-color: #1b1e23 !important;
+  }
+  .\!border-\[\#2c549d\] {
+    border-color: #2c549d !important;
+  }
+  .\!border-\[\#9e454b\] {
+    border-color: #9e454b !important;
+  }
+  .\!border-\[\#54a8c7\] {
+    border-color: #54a8c7 !important;
+  }
+  .\!border-\[\#343f52\] {
+    border-color: #343f52 !important;
+  }
+  .\!border-\[\#308970\] {
+    border-color: #308970 !important;
+  }
+  .\!border-\[\#3b768b\] {
+    border-color: #3b768b !important;
+  }
+  .\!border-\[\#e31e24\] {
+    border-color: #e31e24 !important;
+  }
+  .\!border-\[\#747ed1\] {
+    border-color: #747ed1 !important;
+  }
+  .\!border-\[\#777b84\] {
+    border-color: #777b84 !important;
+  }
+  .\!border-\[\#a07cc5\] {
+    border-color: #a07cc5 !important;
+  }
+  .\!border-\[\#af803e\] {
+    border-color: #af803e !important;
+  }
+  .\!border-\[\#b2b2b2\] {
+    border-color: #b2b2b2 !important;
+  }
+  .\!border-\[\#c5d7f6\] {
+    border-color: #c5d7f6 !important;
+  }
+  .\!border-\[\#c7ede3\] {
+    border-color: #c7ede3 !important;
+  }
+  .\!border-\[\#cfceea\] {
+    border-color: #cfceea !important;
+  }
+  .\!border-\[\#d16b86\] {
+    border-color: #d16b86 !important;
+  }
+  .\!border-\[\#fddcd6\] {
+    border-color: #fddcd6 !important;
+  }
+  .\!border-\[\#fee9cd\] {
+    border-color: #fee9cd !important;
+  }
+  .\!border-\[rgba\(69\,196\,160\)\] {
+    border-color: rgba(69,196,160) !important;
+  }
+  .\!border-\[rgba\(226\,98\,107\)\] {
+    border-color: rgba(226,98,107) !important;
+  }
+  .\!border-\[rgba\(255\,255\,255\,0\.1\)\] {
+    border-color: rgba(255,255,255,0.1) !important;
+  }
+  .\!border-transparent {
+    border-color: transparent !important;
+  }
+  .\!border-white {
+    border-color: var(--color-white) !important;
+  }
+  .border-\[\#5eb9f0\] {
+    border-color: #5eb9f0;
+  }
+  .border-\[\#343f52\] {
+    border-color: #343f52;
+  }
+  .border-\[\#3f78e0\] {
+    border-color: #3f78e0;
+  }
+  .border-\[\#7cb798\] {
+    border-color: #7cb798;
+  }
+  .border-\[\#45c4a0\] {
+    border-color: #45c4a0;
+  }
+  .border-\[\#54a8c7\] {
+    border-color: #54a8c7;
+  }
+  .border-\[\#e31e24\] {
+    border-color: #e31e24;
+  }
+  .border-\[\#747ed1\] {
+    border-color: #747ed1;
+  }
+  .border-\[\#9499a3\] {
+    border-color: #9499a3;
+  }
+  .border-\[\#a07cc5\] {
+    border-color: #a07cc5;
+  }
+  .border-\[\#c2c5cb\] {
+    border-color: #c2c5cb;
+  }
+  .border-\[\#c5d7f6\] {
+    border-color: #c5d7f6;
+  }
+  .border-\[\#c7ede3\] {
+    border-color: #c7ede3;
+  }
+  .border-\[\#cce5ee\] {
+    border-color: #cce5ee;
+  }
+  .border-\[\#cfceea\] {
+    border-color: #cfceea;
+  }
+  .border-\[\#cfeafb\] {
+    border-color: #cfeafb;
+  }
+  .border-\[\#d5d8f1\] {
+    border-color: #d5d8f1;
+  }
+  .border-\[\#d8e9e0\] {
+    border-color: #d8e9e0;
+  }
+  .border-\[\#d16b86\] {
+    border-color: #d16b86;
+  }
+  .border-\[\#e3d8ee\] {
+    border-color: #e3d8ee;
+  }
+  .border-\[\#e668b3\] {
+    border-color: #e668b3;
+  }
+  .border-\[\#e2626b\] {
+    border-color: #e2626b;
+  }
+  .border-\[\#f1d3db\] {
+    border-color: #f1d3db;
+  }
+  .border-\[\#f6d0d3\] {
+    border-color: #f6d0d3;
+  }
+  .border-\[\#f8d2e8\] {
+    border-color: #f8d2e8;
+  }
+  .border-\[\#f78b77\] {
+    border-color: #f78b77;
+  }
+  .border-\[\#fab758\] {
+    border-color: #fab758;
+  }
+  .border-\[\#fddcd6\] {
+    border-color: #fddcd6;
+  }
+  .border-\[\#fee9cd\] {
+    border-color: #fee9cd;
+  }
+  .border-\[\#fff\] {
+    border-color: #fff;
+  }
+  .border-\[none\] {
+    border-color: none;
+  }
+  .border-\[rgba\(8\,60\,130\,0\.07\)\] {
+    border-color: rgba(8,60,130,0.07);
+  }
+  .border-\[rgba\(164\,174\,198\,\.2\)\] {
+    border-color: rgba(164,174,198,.2);
+  }
+  .border-\[rgba\(255\,255\,255\,\.1\)\] {
+    border-color: rgba(255,255,255,.1);
+  }
+  .border-black {
+    border-color: var(--color-black);
+  }
+  .border-transparent {
+    border-color: transparent;
+  }
+  .border-white {
+    border-color: var(--color-white);
+  }
+  .border-b-\[rgba\(164\,174\,198\,0\.2\)\] {
+    border-bottom-color: rgba(164,174,198,0.2);
+  }
+  .border-l-\[\#3f78e0\] {
+    border-left-color: #3f78e0;
+  }
+  .\!bg-\[\#5daed5\] {
+    background-color: #5daed5 !important;
+  }
+  .\!bg-\[\#5eb9f0\] {
+    background-color: #5eb9f0 !important;
+  }
+  .\!bg-\[\#343f52\] {
+    background-color: #343f52 !important;
+  }
+  .\!bg-\[\#3f78e0\] {
+    background-color: #3f78e0 !important;
+  }
+  .\!bg-\[\#7cb798\] {
+    background-color: #7cb798 !important;
+  }
+  .\!bg-\[\#45c4a0\] {
+    background-color: #45c4a0 !important;
+  }
+  .\!bg-\[\#54a8c7\] {
+    background-color: #54a8c7 !important;
+  }
+  .\!bg-\[\#e31e24\] {
+    background-color: #e31e24 !important;
+  }
+  .\!bg-\[\#747ed1\] {
+    background-color: #747ed1 !important;
+  }
+  .\!bg-\[\#4470cf\] {
+    background-color: #4470cf !important;
+  }
+  .\!bg-\[\#21262c\] {
+    background-color: #21262c !important;
+  }
+  .\!bg-\[\#a07cc5\] {
+    background-color: #a07cc5 !important;
+  }
+  .\!bg-\[\#d16b86\] {
+    background-color: #d16b86 !important;
+  }
+  .\!bg-\[\#def4ee\] {
+    background-color: #def4ee !important;
+  }
+  .\!bg-\[\#e0e9fa\] {
+    background-color: #e0e9fa !important;
+  }
+  .\!bg-\[\#e0eff5\] {
+    background-color: #e0eff5 !important;
+  }
+  .\!bg-\[\#e1f6f0\] {
+    background-color: #e1f6f0 !important;
+  }
+  .\!bg-\[\#e94d88\] {
+    background-color: #e94d88 !important;
+  }
+  .\!bg-\[\#e9eaf8\] {
+    background-color: #e9eaf8 !important;
+  }
+  .\!bg-\[\#e668b3\] {
+    background-color: #e668b3 !important;
+  }
+  .\!bg-\[\#e6e5f4\] {
+    background-color: #e6e5f4 !important;
+  }
+  .\!bg-\[\#e6e8f7\] {
+    background-color: #e6e8f7 !important;
+  }
+  .\!bg-\[\#e7f2ec\] {
+    background-color: #e7f2ec !important;
+  }
+  .\!bg-\[\#e2626b\] {
+    background-color: #e2626b !important;
+  }
+  .\!bg-\[\#e44134\] {
+    background-color: #e44134 !important;
+  }
+  .\!bg-\[\#eaebec\] {
+    background-color: #eaebec !important;
+  }
+  .\!bg-\[\#eaf3ef\] {
+    background-color: #eaf3ef !important;
+  }
+  .\!bg-\[\#ecedef\] {
+    background-color: #ecedef !important;
+  }
+  .\!bg-\[\#edf2fc\] {
+    background-color: #edf2fc !important;
+  }
+  .\!bg-\[\#edf9f6\] {
+    background-color: #edf9f6 !important;
+  }
+  .\!bg-\[\#eee7f5\] {
+    background-color: #eee7f5 !important;
+  }
+  .\!bg-\[\#eff7fa\] {
+    background-color: #eff7fa !important;
+  }
+  .\!bg-\[\#f0eaf6\] {
+    background-color: #f0eaf6 !important;
+  }
+  .\!bg-\[\#f0f0f8\] {
+    background-color: #f0f0f8 !important;
+  }
+  .\!bg-\[\#f0f8fe\] {
+    background-color: #f0f8fe !important;
+  }
+  .\!bg-\[\#f2f3fb\] {
+    background-color: #f2f3fb !important;
+  }
+  .\!bg-\[\#f3f8f5\] {
+    background-color: #f3f8f5 !important;
+  }
+  .\!bg-\[\#f5f5f6\] {
+    background-color: #f5f5f6 !important;
+  }
+  .\!bg-\[\#f6f3f9\] {
+    background-color: #f6f3f9 !important;
+  }
+  .\!bg-\[\#f8e7ec\] {
+    background-color: #f8e7ec !important;
+  }
+  .\!bg-\[\#f78b77\] {
+    background-color: #f78b77 !important;
+  }
+  .\!bg-\[\#f7f7f9\] {
+    background-color: #f7f7f9 !important;
+  }
+  .\!bg-\[\#fab758\] {
+    background-color: #fab758 !important;
+  }
+  .\!bg-\[\#fae3e4\] {
+    background-color: #fae3e4 !important;
+  }
+  .\!bg-\[\#fae6e7\] {
+    background-color: #fae6e7 !important;
+  }
+  .\!bg-\[\#fbe7f3\] {
+    background-color: #fbe7f3 !important;
+  }
+  .\!bg-\[\#fbf1f4\] {
+    background-color: #fbf1f4 !important;
+  }
+  .\!bg-\[\#fbfbfc\] {
+    background-color: #fbfbfc !important;
+  }
+  .\!bg-\[\#fcf0f1\] {
+    background-color: #fcf0f1 !important;
+  }
+  .\!bg-\[\#fdf1f8\] {
+    background-color: #fdf1f8 !important;
+  }
+  .\!bg-\[\#feeae7\] {
+    background-color: #feeae7 !important;
+  }
+  .\!bg-\[\#feece9\] {
+    background-color: #feece9 !important;
+  }
+  .\!bg-\[\#feeed9\] {
+    background-color: #feeed9 !important;
+  }
+  .\!bg-\[\#fef3e4\] {
+    background-color: #fef3e4 !important;
+  }
+  .\!bg-\[\#fef4f2\] {
+    background-color: #fef4f2 !important;
+  }
+  .\!bg-\[\#fff8ee\] {
+    background-color: #fff8ee !important;
+  }
+  .\!bg-\[\#ffffff\] {
+    background-color: #ffffff !important;
+  }
+  .\!bg-\[rgba\(52\,63\,82\)\] {
+    background-color: rgba(52,63,82) !important;
+  }
+  .\!bg-\[rgba\(63\,120\,224\)\] {
+    background-color: rgba(63,120,224) !important;
+  }
+  .\!bg-\[rgba\(69\,196\,160\)\] {
+    background-color: rgba(69,196,160) !important;
+  }
+  .\!bg-\[rgba\(84\,168\,199\)\] {
+    background-color: rgba(84,168,199) !important;
+  }
+  .\!bg-\[rgba\(94\,185\,240\)\] {
+    background-color: rgba(94,185,240) !important;
+  }
+  .\!bg-\[rgba\(96\,93\,186\)\] {
+    background-color: rgba(96,93,186) !important;
+  }
+  .\!bg-\[rgba\(96\,93\,186\,\.9\)\] {
+    background-color: rgba(96,93,186,.9) !important;
+  }
+  .\!bg-\[rgba\(116\,126\,209\)\] {
+    background-color: rgba(116,126,209) !important;
+  }
+  .\!bg-\[rgba\(116\,126\,209\,\.9\)\] {
+    background-color: rgba(116,126,209,.9) !important;
+  }
+  .\!bg-\[rgba\(124\,183\,152\)\] {
+    background-color: rgba(124,183,152) !important;
+  }
+  .\!bg-\[rgba\(148\,153\,163\)\] {
+    background-color: rgba(148,153,163) !important;
+  }
+  .\!bg-\[rgba\(160\,124\,197\)\] {
+    background-color: rgba(160,124,197) !important;
+  }
+  .\!bg-\[rgba\(209\,107\,134\)\] {
+    background-color: rgba(209,107,134) !important;
+  }
+  .\!bg-\[rgba\(226\,98\,107\)\] {
+    background-color: rgba(226,98,107) !important;
+  }
+  .\!bg-\[rgba\(230\,104\,179\)\] {
+    background-color: rgba(230,104,179) !important;
+  }
+  .\!bg-\[rgba\(246\,247\,249\)\] {
+    background-color: rgba(246,247,249) !important;
+  }
+  .\!bg-\[rgba\(246\,247\,249\,1\)\] {
+    background-color: rgba(246,247,249,1) !important;
+  }
+  .\!bg-\[rgba\(247\,139\,119\)\] {
+    background-color: rgba(247,139,119) !important;
+  }
+  .\!bg-\[rgba\(250\,183\,88\)\] {
+    background-color: rgba(250,183,88) !important;
+  }
+  .\!bg-\[rgba\(254\,254\,254\)\] {
+    background-color: rgba(254,254,254) !important;
+  }
+  .\!bg-\[rgba\(254\,254\,254\,1\)\] {
+    background-color: rgba(254,254,254,1) !important;
+  }
+  .\!bg-\[rgba\(255\,255\,255\,\.9\)\] {
+    background-color: rgba(255,255,255,.9) !important;
+  }
+  .\!bg-black {
+    background-color: var(--color-black) !important;
+  }
+  .\!bg-inherit {
+    background-color: inherit !important;
+  }
+  .bg-\(--my_variable\) {
+    background-color: var(--my_variable);
+  }
+  .bg-\(color\:--my-color\) {
+    background-color: var(--my-color);
+  }
+  .bg-\[\#5eb9f0\] {
+    background-color: #5eb9f0;
+  }
+  .bg-\[\#7cb798\] {
+    background-color: #7cb798;
+  }
+  .bg-\[\#45c4a0\] {
+    background-color: #45c4a0;
+  }
+  .bg-\[\#54a8c7\] {
+    background-color: #54a8c7;
+  }
+  .bg-\[\#0088cc\] {
+    background-color: #0088cc;
+  }
+  .bg-\[\#262b32\] {
+    background-color: #262b32;
+  }
+  .bg-\[\#343f52\] {
+    background-color: #343f52;
+  }
+  .bg-\[\#3f78e0\] {
+    background-color: #3f78e0;
+  }
+  .bg-\[\#e31e24\] {
+    background-color: #e31e24;
+  }
+  .bg-\[\#747ed1\] {
+    background-color: #747ed1;
+  }
+  .bg-\[\#9499a3\] {
+    background-color: #9499a3;
+  }
+  .bg-\[\#21262c\] {
+    background-color: #21262c;
+  }
+  .bg-\[\#a4aec633\] {
+    background-color: #a4aec633;
+  }
+  .bg-\[\#a07cc5\] {
+    background-color: #a07cc5;
+  }
+  .bg-\[\#d16b86\] {
+    background-color: #d16b86;
+  }
+  .bg-\[\#dadce0\] {
+    background-color: #dadce0;
+  }
+  .bg-\[\#dcddde\] {
+    background-color: #dcddde;
+  }
+  .bg-\[\#dce7f9\] {
+    background-color: #dce7f9;
+  }
+  .bg-\[\#def4ee\] {
+    background-color: #def4ee;
+  }
+  .bg-\[\#dfe0e3\] {
+    background-color: #dfe0e3;
+  }
+  .bg-\[\#e0e9fa\] {
+    background-color: #e0e9fa;
+  }
+  .bg-\[\#e0eff5\] {
+    background-color: #e0eff5;
+  }
+  .bg-\[\#e1f6f0\] {
+    background-color: #e1f6f0;
+  }
+  .bg-\[\#e2626b\] {
+    background-color: #e2626b;
+  }
+  .bg-\[\#e2e2f3\] {
+    background-color: #e2e2f3;
+  }
+  .bg-\[\#e4f1f6\] {
+    background-color: #e4f1f6;
+  }
+  .bg-\[\#e5f4fd\] {
+    background-color: #e5f4fd;
+  }
+  .bg-\[\#e7f2ec\] {
+    background-color: #e7f2ec;
+  }
+  .bg-\[\#e668b3\] {
+    background-color: #e668b3;
+  }
+  .bg-\[\#e6e5f4\] {
+    background-color: #e6e5f4;
+  }
+  .bg-\[\#e6e8f7\] {
+    background-color: #e6e8f7;
+  }
+  .bg-\[\#e9eaf8\] {
+    background-color: #e9eaf8;
+  }
+  .bg-\[\#eaf3ef\] {
+    background-color: #eaf3ef;
+  }
+  .bg-\[\#ecedef\] {
+    background-color: #ecedef;
+  }
+  .bg-\[\#edf2fc\] {
+    background-color: #edf2fc;
+  }
+  .bg-\[\#edf9f6\] {
+    background-color: #edf9f6;
+  }
+  .bg-\[\#eee7f5\] {
+    background-color: #eee7f5;
+  }
+  .bg-\[\#eff7fa\] {
+    background-color: #eff7fa;
+  }
+  .bg-\[\#f0eaf6\] {
+    background-color: #f0eaf6;
+  }
+  .bg-\[\#f0f0f8\] {
+    background-color: #f0f0f8;
+  }
+  .bg-\[\#f0f8fe\] {
+    background-color: #f0f8fe;
+  }
+  .bg-\[\#f2f3fb\] {
+    background-color: #f2f3fb;
+  }
+  .bg-\[\#f3f8f5\] {
+    background-color: #f3f8f5;
+  }
+  .bg-\[\#f5f5f6\] {
+    background-color: #f5f5f6;
+  }
+  .bg-\[\#f6f3f9\] {
+    background-color: #f6f3f9;
+  }
+  .bg-\[\#f8e7ec\] {
+    background-color: #f8e7ec;
+  }
+  .bg-\[\#f78b77\] {
+    background-color: #f78b77;
+  }
+  .bg-\[\#fab758\] {
+    background-color: #fab758;
+  }
+  .bg-\[\#fae3e4\] {
+    background-color: #fae3e4;
+  }
+  .bg-\[\#fae6e7\] {
+    background-color: #fae6e7;
+  }
+  .bg-\[\#fbe4f1\] {
+    background-color: #fbe4f1;
+  }
+  .bg-\[\#fbe7f3\] {
+    background-color: #fbe7f3;
+  }
+  .bg-\[\#fbf1f4\] {
+    background-color: #fbf1f4;
+  }
+  .bg-\[\#fcf0f1\] {
+    background-color: #fcf0f1;
+  }
+  .bg-\[\#fdf1f8\] {
+    background-color: #fdf1f8;
+  }
+  .bg-\[\#feeae7\] {
+    background-color: #feeae7;
+  }
+  .bg-\[\#feece9\] {
+    background-color: #feece9;
+  }
+  .bg-\[\#feeed9\] {
+    background-color: #feeed9;
+  }
+  .bg-\[\#fef3e4\] {
+    background-color: #fef3e4;
+  }
+  .bg-\[\#fef4f2\] {
+    background-color: #fef4f2;
+  }
+  .bg-\[\#fefefe\] {
+    background-color: #fefefe;
+  }
+  .bg-\[\#fff8ee\] {
+    background-color: #fff8ee;
+  }
+  .bg-\[\#ffffff\] {
+    background-color: #ffffff;
+  }
+  .bg-\[color\:var\(--my-color\)\] {
+    background-color: var(--my-color);
+  }
+  .bg-\[none\] {
+    background-color: none;
+  }
+  .bg-\[rgba\(30\,34\,40\,0\.07\)\] {
+    background-color: rgba(30,34,40,0.07);
+  }
+  .bg-\[rgba\(38\,43\,50\,\.8\)\] {
+    background-color: rgba(38,43,50,.8);
+  }
+  .bg-\[rgba\(52\,63\,82\)\] {
+    background-color: rgba(52,63,82);
+  }
+  .bg-\[rgba\(63\,120\,224\)\] {
+    background-color: rgba(63,120,224);
+  }
+  .bg-\[rgba\(69\,196\,160\)\] {
+    background-color: rgba(69,196,160);
+  }
+  .bg-\[rgba\(84\,168\,199\)\] {
+    background-color: rgba(84,168,199);
+  }
+  .bg-\[rgba\(94\,185\,240\)\] {
+    background-color: rgba(94,185,240);
+  }
+  .bg-\[rgba\(96\,93\,186\)\] {
+    background-color: rgba(96,93,186);
+  }
+  .bg-\[rgba\(116\,126\,209\)\] {
+    background-color: rgba(116,126,209);
+  }
+  .bg-\[rgba\(124\,183\,152\)\] {
+    background-color: rgba(124,183,152);
+  }
+  .bg-\[rgba\(148\,153\,163\)\] {
+    background-color: rgba(148,153,163);
+  }
+  .bg-\[rgba\(160\,124\,197\)\] {
+    background-color: rgba(160,124,197);
+  }
+  .bg-\[rgba\(164\,174\,198\,\.2\)\] {
+    background-color: rgba(164,174,198,.2);
+  }
+  .bg-\[rgba\(164\,174\,198\,0\.2\)\] {
+    background-color: rgba(164,174,198,0.2);
+  }
+  .bg-\[rgba\(226\,98\,107\)\] {
+    background-color: rgba(226,98,107);
+  }
+  .bg-\[rgba\(230\,104\,179\)\] {
+    background-color: rgba(230,104,179);
+  }
+  .bg-\[rgba\(246\,247\,249\,1\)\] {
+    background-color: rgba(246,247,249,1);
+  }
+  .bg-\[rgba\(247\,139\,119\)\] {
+    background-color: rgba(247,139,119);
+  }
+  .bg-\[rgba\(250\,183\,88\)\] {
+    background-color: rgba(250,183,88);
+  }
+  .bg-\[rgba\(255\,255\,255\)\] {
+    background-color: rgba(255,255,255);
+  }
+  .bg-\[rgba\(255\,255\,255\,\.03\)\] {
+    background-color: rgba(255,255,255,.03);
+  }
+  .bg-\[rgba\(255\,255\,255\,\.7\)\] {
+    background-color: rgba(255,255,255,.7);
+  }
+  .bg-\[var\(--color\,rgba\(164\,174\,198\,\.2\)\)\] {
+    background-color: var(--color,rgba(164,174,198,.2));
+  }
+  .bg-\[var\(--my_variable\)\] {
+    background-color: var(--my_variable);
+  }
+  .bg-black {
+    background-color: var(--color-black);
+  }
+  .bg-inherit {
+    background-color: inherit;
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .-bg-conic {
+    --tw-gradient-position: in oklab;
+    background-image: conic-gradient(var(--tw-gradient-stops));
+  }
+  .bg-conic {
+    --tw-gradient-position: in oklab;
+    background-image: conic-gradient(var(--tw-gradient-stops));
+  }
+  .bg-radial {
+    --tw-gradient-position: in oklab;
+    background-image: radial-gradient(var(--tw-gradient-stops));
+  }
+  .\!bg-\[radial-gradient\(\#3f78e0_2px\,transparent_2\.5px\)\] {
+    background-image: radial-gradient(#3f78e0 2px,transparent 2.5px) !important;
+  }
+  .\!bg-\[radial-gradient\(\#54a8c7_2px\,transparent_2\.5px\)\] {
+    background-image: radial-gradient(#54a8c7 2px,transparent 2.5px) !important;
+  }
+  .\!bg-\[radial-gradient\(\#747ed1_2px\,transparent_2\.5px\)\] {
+    background-image: radial-gradient(#747ed1 2px,transparent 2.5px) !important;
+  }
+  .bg-\[radial-gradient\(\#3f78e0_2px\,transparent_2\.5px\)\] {
+    background-image: radial-gradient(#3f78e0 2px,transparent 2.5px);
+  }
+  .bg-\[radial-gradient\(\#45c4a0_2px\,transparent_2\.5px\)\] {
+    background-image: radial-gradient(#45c4a0 2px,transparent 2.5px);
+  }
+  .bg-\[radial-gradient\(\#747ed1_2px\,transparent_2\.5px\)\] {
+    background-image: radial-gradient(#747ed1 2px,transparent 2.5px);
+  }
+  .bg-\[radial-gradient\(\#e2626b_2px\,transparent_2\.5px\)\] {
+    background-image: radial-gradient(#e2626b 2px,transparent 2.5px);
+  }
+  .bg-\[radial-gradient\(\#fab758_2px\,transparent_2\.5px\)\] {
+    background-image: radial-gradient(#fab758 2px,transparent 2.5px);
+  }
+  .bg-none {
+    background-image: none;
+  }
+  .via-none {
+    --tw-gradient-via-stops: initial;
+  }
+  .box-decoration-clone {
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+  .box-decoration-slice {
+    -webkit-box-decoration-break: slice;
+    box-decoration-break: slice;
+  }
+  .decoration-clone {
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+  .decoration-slice {
+    -webkit-box-decoration-break: slice;
+    box-decoration-break: slice;
+  }
+  .\!bg-cover {
+    background-size: cover !important;
+  }
+  .\[background-size\:100\%\] {
+    background-size: 100%;
+  }
+  .bg-auto {
+    background-size: auto;
+  }
+  .bg-contain {
+    background-size: contain;
+  }
+  .bg-cover {
+    background-size: cover;
+  }
+  .\!bg-fixed {
+    background-attachment: fixed !important;
+  }
+  .\!bg-scroll {
+    background-attachment: scroll !important;
+  }
+  .bg-fixed {
+    background-attachment: fixed;
+  }
+  .bg-local {
+    background-attachment: local;
+  }
+  .bg-scroll {
+    background-attachment: scroll;
+  }
+  .bg-clip-border {
+    background-clip: border-box;
+  }
+  .bg-clip-content {
+    background-clip: content-box;
+  }
+  .bg-clip-padding {
+    background-clip: padding-box;
+  }
+  .bg-clip-text {
+    background-clip: text;
+  }
+  .\!bg-\[center_center\] {
+    background-position: center center !important;
+  }
+  .\!bg-\[right_0\.4rem_center\] {
+    background-position: right 0.4rem center !important;
+  }
+  .bg-\[center_center\] {
+    background-position: center center;
+  }
+  .bg-bottom {
+    background-position: bottom;
+  }
+  .bg-center {
+    background-position: center;
+  }
+  .bg-left {
+    background-position: left;
+  }
+  .bg-left-bottom {
+    background-position: left bottom;
+  }
+  .bg-left-top {
+    background-position: left top;
+  }
+  .bg-right {
+    background-position: right;
+  }
+  .bg-right-bottom {
+    background-position: right bottom;
+  }
+  .bg-right-top {
+    background-position: right top;
+  }
+  .bg-top {
+    background-position: top;
+  }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+  .bg-repeat {
+    background-repeat: repeat;
+  }
+  .bg-repeat-round {
+    background-repeat: round;
+  }
+  .bg-repeat-space {
+    background-repeat: space;
+  }
+  .bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+  .bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+  .bg-origin-border {
+    background-origin: border-box;
+  }
+  .bg-origin-content {
+    background-origin: content-box;
+  }
+  .bg-origin-padding {
+    background-origin: padding-box;
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke-\[\#343f52\] {
+    stroke: #343f52;
+  }
+  .stroke-\[\#3f78e0\] {
+    stroke: #3f78e0;
+  }
+  .stroke-\[\#54a8c7\] {
+    stroke: #54a8c7;
+  }
+  .stroke-\[\#e31e24\] {
+    stroke: #e31e24;
+  }
+  .stroke-\[\#747ed1\] {
+    stroke: #747ed1;
+  }
+  .stroke-\[\#7cb798\] {
+    stroke: #7cb798;
+  }
+  .stroke-\[\#a07cc5\] {
+    stroke: #a07cc5;
+  }
+  .stroke-\[\#d16b86\] {
+    stroke: #d16b86;
+  }
+  .stroke-\[\#f78b77\] {
+    stroke: #f78b77;
+  }
+  .stroke-\[\#fab758\] {
+    stroke: #fab758;
+  }
+  .stroke-none {
+    stroke: none;
+  }
+  .stroke-\[4\] {
+    stroke-width: 4;
+  }
+  .object-contain {
+    object-fit: contain;
+  }
+  .object-cover {
+    object-fit: cover;
+  }
+  .object-fill {
+    object-fit: fill;
+  }
+  .object-none {
+    object-fit: none;
+  }
+  .object-scale-down {
+    object-fit: scale-down;
+  }
+  .object-bottom {
+    object-position: bottom;
+  }
+  .object-center {
+    object-position: center;
+  }
+  .object-left {
+    object-position: left;
+  }
+  .object-left-bottom {
+    object-position: left bottom;
+  }
+  .object-left-top {
+    object-position: left top;
+  }
+  .object-right {
+    object-position: right;
+  }
+  .object-right-bottom {
+    object-position: right bottom;
+  }
+  .object-right-top {
+    object-position: right top;
+  }
+  .object-top {
+    object-position: top;
+  }
+  .\!p-0 {
+    padding: calc(var(--spacing) * 0) !important;
+  }
+  .\!p-4 {
+    padding: calc(var(--spacing) * 4) !important;
+  }
+  .\!p-10 {
+    padding: calc(var(--spacing) * 10) !important;
+  }
+  .\!p-12 {
+    padding: calc(var(--spacing) * 12) !important;
+  }
+  .\!p-\[\.5rem_\.2rem\] {
+    padding: .5rem .2rem !important;
+  }
+  .\!p-\[\.9rem_1\.3rem_\.85rem\] {
+    padding: .9rem 1.3rem .85rem !important;
+  }
+  .\!p-\[\.25rem_1\.15rem\] {
+    padding: .25rem 1.15rem !important;
+  }
+  .\!p-\[\.2rem_\.5rem\] {
+    padding: .2rem .5rem !important;
+  }
+  .\!p-\[0_0_\.8rem_0\] {
+    padding: 0 0 .8rem 0 !important;
+  }
+  .\!p-\[0_0_0_1\.1rem\] {
+    padding: 0 0 0 1.1rem !important;
+  }
+  .\!p-\[1\.75rem_1\.75rem_1rem_1\.75rem\] {
+    padding: 1.75rem 1.75rem 1rem 1.75rem !important;
+  }
+  .\!p-\[1rem\] {
+    padding: 1rem !important;
+  }
+  .\!p-\[3rem_40px_3\.5rem_40px\] {
+    padding: 3rem 40px 3.5rem 40px !important;
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+  .p-7 {
+    padding: calc(var(--spacing) * 7);
+  }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+  .p-9 {
+    padding: calc(var(--spacing) * 9);
+  }
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
+  .p-11 {
+    padding: calc(var(--spacing) * 11);
+  }
+  .p-12 {
+    padding: calc(var(--spacing) * 12);
+  }
+  .p-13 {
+    padding: calc(var(--spacing) * 13);
+  }
+  .p-14 {
+    padding: calc(var(--spacing) * 14);
+  }
+  .p-15 {
+    padding: calc(var(--spacing) * 15);
+  }
+  .p-16 {
+    padding: calc(var(--spacing) * 16);
+  }
+  .p-17 {
+    padding: calc(var(--spacing) * 17);
+  }
+  .p-18 {
+    padding: calc(var(--spacing) * 18);
+  }
+  .p-19 {
+    padding: calc(var(--spacing) * 19);
+  }
+  .p-20 {
+    padding: calc(var(--spacing) * 20);
+  }
+  .p-21 {
+    padding: calc(var(--spacing) * 21);
+  }
+  .p-22 {
+    padding: calc(var(--spacing) * 22);
+  }
+  .p-23 {
+    padding: calc(var(--spacing) * 23);
+  }
+  .p-24 {
+    padding: calc(var(--spacing) * 24);
+  }
+  .p-25 {
+    padding: calc(var(--spacing) * 25);
+  }
+  .p-\[\.5rem_\.2rem_1rem\] {
+    padding: .5rem .2rem 1rem;
+  }
+  .p-\[\.6rem_1rem\] {
+    padding: .6rem 1rem;
+  }
+  .p-\[\.75rem_1rem\] {
+    padding: .75rem 1rem;
+  }
+  .p-\[0\.8rem\] {
+    padding: 0.8rem;
+  }
+  .p-\[0_\.2rem_\.05rem\] {
+    padding: 0 .2rem .05rem;
+  }
+  .p-\[0_0_\.8rem_0\] {
+    padding: 0 0 .8rem 0;
+  }
+  .p-\[0_0_0\.8rem_0\] {
+    padding: 0 0 0.8rem 0;
+  }
+  .p-\[0_0_0_1\.1rem\] {
+    padding: 0 0 0 1.1rem;
+  }
+  .p-\[0_1\.25rem_\.25rem_2\.35rem\] {
+    padding: 0 1.25rem .25rem 2.35rem;
+  }
+  .p-\[1\.5rem\] {
+    padding: 1.5rem;
+  }
+  .p-\[2\.25rem\] {
+    padding: 2.25rem;
+  }
+  .p-\[3rem_2rem\] {
+    padding: 3rem 2rem;
+  }
+  .p-\[18px_40px\] {
+    padding: 18px 40px;
+  }
+  .p-\[40px\] {
+    padding: 40px;
+  }
+  .p-\[70px_40px\] {
+    padding: 70px 40px;
+  }
+  .\!px-0 {
+    padding-inline: calc(var(--spacing) * 0) !important;
+  }
+  .\!px-2 {
+    padding-inline: calc(var(--spacing) * 2) !important;
+  }
+  .\!px-3 {
+    padding-inline: calc(var(--spacing) * 3) !important;
+  }
+  .\!px-9 {
+    padding-inline: calc(var(--spacing) * 9) !important;
+  }
+  .\!px-\[2rem\] {
+    padding-inline: 2rem !important;
+  }
+  .\!px-\[15px\] {
+    padding-inline: 15px !important;
+  }
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .px-7 {
+    padding-inline: calc(var(--spacing) * 7);
+  }
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+  .px-9 {
+    padding-inline: calc(var(--spacing) * 9);
+  }
+  .px-10 {
+    padding-inline: calc(var(--spacing) * 10);
+  }
+  .px-11 {
+    padding-inline: calc(var(--spacing) * 11);
+  }
+  .px-12 {
+    padding-inline: calc(var(--spacing) * 12);
+  }
+  .px-13 {
+    padding-inline: calc(var(--spacing) * 13);
+  }
+  .px-14 {
+    padding-inline: calc(var(--spacing) * 14);
+  }
+  .px-15 {
+    padding-inline: calc(var(--spacing) * 15);
+  }
+  .px-16 {
+    padding-inline: calc(var(--spacing) * 16);
+  }
+  .px-17 {
+    padding-inline: calc(var(--spacing) * 17);
+  }
+  .px-18 {
+    padding-inline: calc(var(--spacing) * 18);
+  }
+  .px-19 {
+    padding-inline: calc(var(--spacing) * 19);
+  }
+  .px-20 {
+    padding-inline: calc(var(--spacing) * 20);
+  }
+  .px-21 {
+    padding-inline: calc(var(--spacing) * 21);
+  }
+  .px-22 {
+    padding-inline: calc(var(--spacing) * 22);
+  }
+  .px-23 {
+    padding-inline: calc(var(--spacing) * 23);
+  }
+  .px-24 {
+    padding-inline: calc(var(--spacing) * 24);
+  }
+  .px-25 {
+    padding-inline: calc(var(--spacing) * 25);
+  }
+  .px-\[0\.6rem\] {
+    padding-inline: 0.6rem;
+  }
+  .px-\[5px\] {
+    padding-inline: 5px;
+  }
+  .px-\[7\.5px\] {
+    padding-inline: 7.5px;
+  }
+  .px-\[10px\] {
+    padding-inline: 10px;
+  }
+  .px-\[12\.5px\] {
+    padding-inline: 12.5px;
+  }
+  .px-\[15px\] {
+    padding-inline: 15px;
+  }
+  .px-\[17\.5px\] {
+    padding-inline: 17.5px;
+  }
+  .px-\[20px\] {
+    padding-inline: 20px;
+  }
+  .px-\[40px\] {
+    padding-inline: 40px;
+  }
+  .\!py-12 {
+    padding-block: calc(var(--spacing) * 12) !important;
+  }
+  .\!py-\[0\.2rem\] {
+    padding-block: 0.2rem !important;
+  }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
+  .py-7 {
+    padding-block: calc(var(--spacing) * 7);
+  }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+  .py-9 {
+    padding-block: calc(var(--spacing) * 9);
+  }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
+  .py-11 {
+    padding-block: calc(var(--spacing) * 11);
+  }
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+  .py-13 {
+    padding-block: calc(var(--spacing) * 13);
+  }
+  .py-14 {
+    padding-block: calc(var(--spacing) * 14);
+  }
+  .py-15 {
+    padding-block: calc(var(--spacing) * 15);
+  }
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
+  .py-17 {
+    padding-block: calc(var(--spacing) * 17);
+  }
+  .py-18 {
+    padding-block: calc(var(--spacing) * 18);
+  }
+  .py-19 {
+    padding-block: calc(var(--spacing) * 19);
+  }
+  .py-20 {
+    padding-block: calc(var(--spacing) * 20);
+  }
+  .py-21 {
+    padding-block: calc(var(--spacing) * 21);
+  }
+  .py-22 {
+    padding-block: calc(var(--spacing) * 22);
+  }
+  .py-23 {
+    padding-block: calc(var(--spacing) * 23);
+  }
+  .py-24 {
+    padding-block: calc(var(--spacing) * 24);
+  }
+  .py-25 {
+    padding-block: calc(var(--spacing) * 25);
+  }
+  .py-28 {
+    padding-block: calc(var(--spacing) * 28);
+  }
+  .py-\[0\.4rem\] {
+    padding-block: 0.4rem;
+  }
+  .py-\[0\.6rem\] {
+    padding-block: 0.6rem;
+  }
+  .py-\[0\.75rem\] {
+    padding-block: 0.75rem;
+  }
+  .py-\[4\.5rem\] {
+    padding-block: 4.5rem;
+  }
+  .py-\[5rem\] {
+    padding-block: 5rem;
+  }
+  .py-\[7rem\] {
+    padding-block: 7rem;
+  }
+  .py-\[8rem\] {
+    padding-block: 8rem;
+  }
+  .py-\[60px\] {
+    padding-block: 60px;
+  }
+  .py-\[6rem\] {
+    padding-block: 6rem;
+  }
+  .ps-0 {
+    padding-inline-start: calc(var(--spacing) * 0);
+  }
+  .ps-1 {
+    padding-inline-start: calc(var(--spacing) * 1);
+  }
+  .ps-2 {
+    padding-inline-start: calc(var(--spacing) * 2);
+  }
+  .ps-3 {
+    padding-inline-start: calc(var(--spacing) * 3);
+  }
+  .ps-4 {
+    padding-inline-start: calc(var(--spacing) * 4);
+  }
+  .ps-5 {
+    padding-inline-start: calc(var(--spacing) * 5);
+  }
+  .ps-6 {
+    padding-inline-start: calc(var(--spacing) * 6);
+  }
+  .ps-7 {
+    padding-inline-start: calc(var(--spacing) * 7);
+  }
+  .ps-8 {
+    padding-inline-start: calc(var(--spacing) * 8);
+  }
+  .ps-9 {
+    padding-inline-start: calc(var(--spacing) * 9);
+  }
+  .ps-10 {
+    padding-inline-start: calc(var(--spacing) * 10);
+  }
+  .ps-11 {
+    padding-inline-start: calc(var(--spacing) * 11);
+  }
+  .ps-12 {
+    padding-inline-start: calc(var(--spacing) * 12);
+  }
+  .ps-13 {
+    padding-inline-start: calc(var(--spacing) * 13);
+  }
+  .ps-14 {
+    padding-inline-start: calc(var(--spacing) * 14);
+  }
+  .ps-15 {
+    padding-inline-start: calc(var(--spacing) * 15);
+  }
+  .ps-16 {
+    padding-inline-start: calc(var(--spacing) * 16);
+  }
+  .ps-17 {
+    padding-inline-start: calc(var(--spacing) * 17);
+  }
+  .ps-18 {
+    padding-inline-start: calc(var(--spacing) * 18);
+  }
+  .ps-19 {
+    padding-inline-start: calc(var(--spacing) * 19);
+  }
+  .ps-20 {
+    padding-inline-start: calc(var(--spacing) * 20);
+  }
+  .ps-21 {
+    padding-inline-start: calc(var(--spacing) * 21);
+  }
+  .ps-22 {
+    padding-inline-start: calc(var(--spacing) * 22);
+  }
+  .ps-23 {
+    padding-inline-start: calc(var(--spacing) * 23);
+  }
+  .ps-24 {
+    padding-inline-start: calc(var(--spacing) * 24);
+  }
+  .ps-25 {
+    padding-inline-start: calc(var(--spacing) * 25);
+  }
+  .pe-0 {
+    padding-inline-end: calc(var(--spacing) * 0);
+  }
+  .pe-1 {
+    padding-inline-end: calc(var(--spacing) * 1);
+  }
+  .pe-2 {
+    padding-inline-end: calc(var(--spacing) * 2);
+  }
+  .pe-3 {
+    padding-inline-end: calc(var(--spacing) * 3);
+  }
+  .pe-4 {
+    padding-inline-end: calc(var(--spacing) * 4);
+  }
+  .pe-5 {
+    padding-inline-end: calc(var(--spacing) * 5);
+  }
+  .pe-6 {
+    padding-inline-end: calc(var(--spacing) * 6);
+  }
+  .pe-7 {
+    padding-inline-end: calc(var(--spacing) * 7);
+  }
+  .pe-8 {
+    padding-inline-end: calc(var(--spacing) * 8);
+  }
+  .pe-9 {
+    padding-inline-end: calc(var(--spacing) * 9);
+  }
+  .pe-10 {
+    padding-inline-end: calc(var(--spacing) * 10);
+  }
+  .pe-11 {
+    padding-inline-end: calc(var(--spacing) * 11);
+  }
+  .pe-12 {
+    padding-inline-end: calc(var(--spacing) * 12);
+  }
+  .pe-13 {
+    padding-inline-end: calc(var(--spacing) * 13);
+  }
+  .pe-14 {
+    padding-inline-end: calc(var(--spacing) * 14);
+  }
+  .pe-15 {
+    padding-inline-end: calc(var(--spacing) * 15);
+  }
+  .pe-16 {
+    padding-inline-end: calc(var(--spacing) * 16);
+  }
+  .pe-17 {
+    padding-inline-end: calc(var(--spacing) * 17);
+  }
+  .pe-18 {
+    padding-inline-end: calc(var(--spacing) * 18);
+  }
+  .pe-19 {
+    padding-inline-end: calc(var(--spacing) * 19);
+  }
+  .pe-20 {
+    padding-inline-end: calc(var(--spacing) * 20);
+  }
+  .pe-21 {
+    padding-inline-end: calc(var(--spacing) * 21);
+  }
+  .pe-22 {
+    padding-inline-end: calc(var(--spacing) * 22);
+  }
+  .pe-23 {
+    padding-inline-end: calc(var(--spacing) * 23);
+  }
+  .pe-24 {
+    padding-inline-end: calc(var(--spacing) * 24);
+  }
+  .pe-25 {
+    padding-inline-end: calc(var(--spacing) * 25);
+  }
+  .\!pt-10 {
+    padding-top: calc(var(--spacing) * 10) !important;
+  }
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+  .pt-7 {
+    padding-top: calc(var(--spacing) * 7);
+  }
+  .pt-8 {
+    padding-top: calc(var(--spacing) * 8);
+  }
+  .pt-9 {
+    padding-top: calc(var(--spacing) * 9);
+  }
+  .pt-10 {
+    padding-top: calc(var(--spacing) * 10);
+  }
+  .pt-11 {
+    padding-top: calc(var(--spacing) * 11);
+  }
+  .pt-12 {
+    padding-top: calc(var(--spacing) * 12);
+  }
+  .pt-13 {
+    padding-top: calc(var(--spacing) * 13);
+  }
+  .pt-14 {
+    padding-top: calc(var(--spacing) * 14);
+  }
+  .pt-15 {
+    padding-top: calc(var(--spacing) * 15);
+  }
+  .pt-16 {
+    padding-top: calc(var(--spacing) * 16);
+  }
+  .pt-17 {
+    padding-top: calc(var(--spacing) * 17);
+  }
+  .pt-18 {
+    padding-top: calc(var(--spacing) * 18);
+  }
+  .pt-19 {
+    padding-top: calc(var(--spacing) * 19);
+  }
+  .pt-20 {
+    padding-top: calc(var(--spacing) * 20);
+  }
+  .pt-21 {
+    padding-top: calc(var(--spacing) * 21);
+  }
+  .pt-22 {
+    padding-top: calc(var(--spacing) * 22);
+  }
+  .pt-23 {
+    padding-top: calc(var(--spacing) * 23);
+  }
+  .pt-24 {
+    padding-top: calc(var(--spacing) * 24);
+  }
+  .pt-25 {
+    padding-top: calc(var(--spacing) * 25);
+  }
+  .pt-28 {
+    padding-top: calc(var(--spacing) * 28);
+  }
+  .pt-32 {
+    padding-top: calc(var(--spacing) * 32);
+  }
+  .pt-36 {
+    padding-top: calc(var(--spacing) * 36);
+  }
+  .pt-40 {
+    padding-top: calc(var(--spacing) * 40);
+  }
+  .pt-\[1rem\] {
+    padding-top: 1rem;
+  }
+  .pt-\[2\.5rem\] {
+    padding-top: 2.5rem;
+  }
+  .pt-\[3\.75rem\] {
+    padding-top: 3.75rem;
+  }
+  .pt-\[4\.5rem\] {
+    padding-top: 4.5rem;
+  }
+  .pt-\[4rem\] {
+    padding-top: 4rem;
+  }
+  .pt-\[6rem\] {
+    padding-top: 6rem;
+  }
+  .\!pr-0 {
+    padding-right: calc(var(--spacing) * 0) !important;
+  }
+  .\!pr-9 {
+    padding-right: calc(var(--spacing) * 9) !important;
+  }
+  .\!pr-\[\.25rem\] {
+    padding-right: .25rem !important;
+  }
+  .\!pr-\[\.75rem\] {
+    padding-right: .75rem !important;
+  }
+  .\!pr-\[1\.4rem\] {
+    padding-right: 1.4rem !important;
+  }
+  .pr-\[\.75rem\] {
+    padding-right: .75rem;
+  }
+  .pr-\[0\.2rem\] {
+    padding-right: 0.2rem;
+  }
+  .pr-\[0\.4rem\] {
+    padding-right: 0.4rem;
+  }
+  .pr-\[1\.4rem\] {
+    padding-right: 1.4rem;
+  }
+  .pr-\[2\.5rem\] {
+    padding-right: 2.5rem;
+  }
+  .\!pb-0 {
+    padding-bottom: calc(var(--spacing) * 0) !important;
+  }
+  .\!pb-4 {
+    padding-bottom: calc(var(--spacing) * 4) !important;
+  }
+  .\!pb-6 {
+    padding-bottom: calc(var(--spacing) * 6) !important;
+  }
+  .\!pb-36 {
+    padding-bottom: calc(var(--spacing) * 36) !important;
+  }
+  .\!pb-\[1\.5rem\] {
+    padding-bottom: 1.5rem !important;
+  }
+  .\!pb-\[4\.5rem\] {
+    padding-bottom: 4.5rem !important;
+  }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+  .pb-5 {
+    padding-bottom: calc(var(--spacing) * 5);
+  }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+  .pb-7 {
+    padding-bottom: calc(var(--spacing) * 7);
+  }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
+  .pb-9 {
+    padding-bottom: calc(var(--spacing) * 9);
+  }
+  .pb-10 {
+    padding-bottom: calc(var(--spacing) * 10);
+  }
+  .pb-11 {
+    padding-bottom: calc(var(--spacing) * 11);
+  }
+  .pb-12 {
+    padding-bottom: calc(var(--spacing) * 12);
+  }
+  .pb-13 {
+    padding-bottom: calc(var(--spacing) * 13);
+  }
+  .pb-14 {
+    padding-bottom: calc(var(--spacing) * 14);
+  }
+  .pb-15 {
+    padding-bottom: calc(var(--spacing) * 15);
+  }
+  .pb-16 {
+    padding-bottom: calc(var(--spacing) * 16);
+  }
+  .pb-17 {
+    padding-bottom: calc(var(--spacing) * 17);
+  }
+  .pb-18 {
+    padding-bottom: calc(var(--spacing) * 18);
+  }
+  .pb-19 {
+    padding-bottom: calc(var(--spacing) * 19);
+  }
+  .pb-20 {
+    padding-bottom: calc(var(--spacing) * 20);
+  }
+  .pb-21 {
+    padding-bottom: calc(var(--spacing) * 21);
+  }
+  .pb-22 {
+    padding-bottom: calc(var(--spacing) * 22);
+  }
+  .pb-23 {
+    padding-bottom: calc(var(--spacing) * 23);
+  }
+  .pb-24 {
+    padding-bottom: calc(var(--spacing) * 24);
+  }
+  .pb-25 {
+    padding-bottom: calc(var(--spacing) * 25);
+  }
+  .pb-28 {
+    padding-bottom: calc(var(--spacing) * 28);
+  }
+  .pb-32 {
+    padding-bottom: calc(var(--spacing) * 32);
+  }
+  .pb-36 {
+    padding-bottom: calc(var(--spacing) * 36);
+  }
+  .pb-40 {
+    padding-bottom: calc(var(--spacing) * 40);
+  }
+  .pb-\[0\.15rem\] {
+    padding-bottom: 0.15rem;
+  }
+  .pb-\[1\.75rem\] {
+    padding-bottom: 1.75rem;
+  }
+  .pb-\[2\.5rem\] {
+    padding-bottom: 2.5rem;
+  }
+  .pb-\[4\.5rem\] {
+    padding-bottom: 4.5rem;
+  }
+  .pb-\[4rem\] {
+    padding-bottom: 4rem;
+  }
+  .pb-\[8rem\] {
+    padding-bottom: 8rem;
+  }
+  .pb-\[12\.5rem\] {
+    padding-bottom: 12.5rem;
+  }
+  .pb-\[17\.5rem\] {
+    padding-bottom: 17.5rem;
+  }
+  .\!pl-0 {
+    padding-left: calc(var(--spacing) * 0) !important;
+  }
+  .\!pl-2 {
+    padding-left: calc(var(--spacing) * 2) !important;
+  }
+  .\!pl-3 {
+    padding-left: calc(var(--spacing) * 3) !important;
+  }
+  .\!pl-4 {
+    padding-left: calc(var(--spacing) * 4) !important;
+  }
+  .\!pl-5 {
+    padding-left: calc(var(--spacing) * 5) !important;
+  }
+  .\!pl-6 {
+    padding-left: calc(var(--spacing) * 6) !important;
+  }
+  .\!pl-8 {
+    padding-left: calc(var(--spacing) * 8) !important;
+  }
+  .\!pl-10 {
+    padding-left: calc(var(--spacing) * 10) !important;
+  }
+  .\!pl-\[\.5rem\] {
+    padding-left: .5rem !important;
+  }
+  .\!pl-\[1\.4rem\] {
+    padding-left: 1.4rem !important;
+  }
+  .\!pl-\[1\.25rem\] {
+    padding-left: 1.25rem !important;
+  }
+  .\!pl-\[1\.55rem\] {
+    padding-left: 1.55rem !important;
+  }
+  .\!pl-\[1\.5rem\] {
+    padding-left: 1.5rem !important;
+  }
+  .\!pl-\[1\.75rem\] {
+    padding-left: 1.75rem !important;
+  }
+  .\!pl-\[1rem\] {
+    padding-left: 1rem !important;
+  }
+  .\!pl-\[2\.5rem\] {
+    padding-left: 2.5rem !important;
+  }
+  .pl-0 {
+    padding-left: calc(var(--spacing) * 0);
+  }
+  .\!text-center {
+    text-align: center !important;
+  }
+  .\!text-left {
+    text-align: left !important;
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-end {
+    text-align: end;
+  }
+  .text-justify {
+    text-align: justify;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .text-start {
+    text-align: start;
+  }
+  .align-\[-\.1rem\] {
+    vertical-align: -.1rem;
+  }
+  .align-\[-\.05rem\] {
+    vertical-align: -.05rem;
+  }
+  .align-\[-1px\] {
+    vertical-align: -1px;
+  }
+  .align-baseline {
+    vertical-align: baseline;
+  }
+  .align-bottom {
+    vertical-align: bottom;
+  }
+  .align-middle {
+    vertical-align: middle;
+  }
+  .align-sub {
+    vertical-align: sub;
+  }
+  .align-super {
+    vertical-align: super;
+  }
+  .align-text-bottom {
+    vertical-align: text-bottom;
+  }
+  .align-text-top {
+    vertical-align: text-top;
+  }
+  .align-top {
+    vertical-align: top;
+  }
+  .\!font-DMSerif {
+    font-family: var(--font-DMSerif) !important;
+  }
+  .\!font-Manrope {
+    font-family: var(--font-Manrope) !important;
+  }
+  .\!font-THICCCBOI {
+    font-family: var(--font-THICCCBOI) !important;
+  }
+  .\!font-Urbanist {
+    font-family: var(--font-Urbanist) !important;
+  }
+  .font-DMSerif {
+    font-family: var(--font-DMSerif);
+  }
+  .font-Manrope {
+    font-family: var(--font-Manrope);
+  }
+  .font-THICCCBOI {
+    font-family: var(--font-THICCCBOI);
+  }
+  .font-Unicons {
+    font-family: var(--font-Unicons);
+  }
+  .\!text-base {
+    font-size: var(--text-base) !important;
+    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .\!text-\[\.75rem\] {
+    font-size: .75rem !important;
+  }
+  .\!text-\[\.7rem\] {
+    font-size: .7rem !important;
+  }
+  .\!text-\[\.85rem\] {
+    font-size: .85rem !important;
+  }
+  .\!text-\[\.8rem\] {
+    font-size: .8rem !important;
+  }
+  .\!text-\[\.95rem\] {
+    font-size: .95rem !important;
+  }
+  .\!text-\[\.9rem\] {
+    font-size: .9rem !important;
+  }
+  .\!text-\[0\.55rem\] {
+    font-size: 0.55rem !important;
+  }
+  .\!text-\[0\.65rem\] {
+    font-size: 0.65rem !important;
+  }
+  .\!text-\[0\.6rem\] {
+    font-size: 0.6rem !important;
+  }
+  .\!text-\[0\.75rem\] {
+    font-size: 0.75rem !important;
+  }
+  .\!text-\[0\.7rem\] {
+    font-size: 0.7rem !important;
+  }
+  .\!text-\[0\.9rem\] {
+    font-size: 0.9rem !important;
+  }
+  .\!text-\[0\.85rem\] {
+    font-size: 0.85rem !important;
+  }
+  .\!text-\[0\.8rem\] {
+    font-size: 0.8rem !important;
+  }
+  .\!text-\[0\.95rem\] {
+    font-size: 0.95rem !important;
+  }
+  .\!text-\[1\.1rem\] {
+    font-size: 1.1rem !important;
+  }
+  .\!text-\[1\.2rem\] {
+    font-size: 1.2rem !important;
+  }
+  .\!text-\[1\.05rem\] {
+    font-size: 1.05rem !important;
+  }
+  .\!text-\[1\.15rem\] {
+    font-size: 1.15rem !important;
+  }
+  .\!text-\[1\.25rem\] {
+    font-size: 1.25rem !important;
+  }
+  .\!text-\[1rem\] {
+    font-size: 1rem !important;
+  }
+  .\!text-\[calc\(1\.255rem_\+_0\.06vw\)\] {
+    font-size: calc(1.255rem + 0.06vw) !important;
+  }
+  .\!text-\[calc\(1\.265rem_\+_0\.18vw\)\] {
+    font-size: calc(1.265rem + 0.18vw) !important;
+  }
+  .\!text-\[calc\(1\.26rem_\+_0\.12vw\)\] {
+    font-size: calc(1.26rem + 0.12vw) !important;
+  }
+  .\!text-\[calc\(1\.275rem_\+_0\.3vw\)\] {
+    font-size: calc(1.275rem + 0.3vw) !important;
+  }
+  .\!text-\[calc\(1\.285rem_\+_0\.42vw\)\] {
+    font-size: calc(1.285rem + 0.42vw) !important;
+  }
+  .\!text-\[calc\(1\.295rem_\+_0\.54vw\)\] {
+    font-size: calc(1.295rem + 0.54vw) !important;
+  }
+  .\!text-\[calc\(1\.305rem_\+_\.66vw\)\] {
+    font-size: calc(1.305rem + .66vw) !important;
+  }
+  .\!text-\[calc\(1\.305rem_\+_0\.66vw\)\] {
+    font-size: calc(1.305rem + 0.66vw) !important;
+  }
+  .\!text-\[calc\(1\.315rem_\+_0\.78vw\)\] {
+    font-size: calc(1.315rem + 0.78vw) !important;
+  }
+  .\!text-\[calc\(1\.325rem_\+_\.9vw\)\] {
+    font-size: calc(1.325rem + .9vw) !important;
+  }
+  .\!text-\[calc\(1\.325rem_\+_0\.9vw\)\] {
+    font-size: calc(1.325rem + 0.9vw) !important;
+  }
+  .\!text-\[calc\(1\.335rem_\+_1\.02vw\)\] {
+    font-size: calc(1.335rem + 1.02vw) !important;
+  }
+  .\!text-\[calc\(1\.345rem_\+_1\.14vw\)\] {
+    font-size: calc(1.345rem + 1.14vw) !important;
+  }
+  .\!text-\[calc\(1\.355rem_\+_1\.26vw\)\] {
+    font-size: calc(1.355rem + 1.26vw) !important;
+  }
+  .\!text-\[calc\(1\.35rem_\+_1\.2vw\)\] {
+    font-size: calc(1.35rem + 1.2vw) !important;
+  }
+  .\!text-\[calc\(1\.365rem_\+_1\.38vw\)\] {
+    font-size: calc(1.365rem + 1.38vw) !important;
+  }
+  .\!text-\[calc\(1\.375rem_\+_1\.5vw\)\] {
+    font-size: calc(1.375rem + 1.5vw) !important;
+  }
+  .\!text-\[calc\(1\.385rem_\+_1\.62vw\)\] {
+    font-size: calc(1.385rem + 1.62vw) !important;
+  }
+  .\!text-\[calc\(1\.395rem_\+_1\.74vw\)\] {
+    font-size: calc(1.395rem + 1.74vw) !important;
+  }
+  .\!text-\[calc\(1\.405rem_\+_1\.86vw\)\] {
+    font-size: calc(1.405rem + 1.86vw) !important;
+  }
+  .\!text-\[calc\(1\.415rem_\+_1\.98vw\)\] {
+    font-size: calc(1.415rem + 1.98vw) !important;
+  }
+  .\!text-\[calc\(1\.425rem_\+_2\.1vw\)\] {
+    font-size: calc(1.425rem + 2.1vw) !important;
+  }
+  .\!text-\[calc\(1\.445rem_\+_2\.34vw\)\] {
+    font-size: calc(1.445rem + 2.34vw) !important;
+  }
+  .\!text-\[calc\(1\.455rem_\+_2\.46vw\)\] {
+    font-size: calc(1.455rem + 2.46vw) !important;
+  }
+  .\!text-\[calc\(1\.465rem_\+_2\.58vw\)\] {
+    font-size: calc(1.465rem + 2.58vw) !important;
+  }
+  .\!text-\[calc\(1\.475rem_\+_2\.7vw\)\] {
+    font-size: calc(1.475rem + 2.7vw) !important;
+  }
+  .text-\[\.05rem\] {
+    font-size: .05rem;
+  }
+  .text-\[\.9rem\] {
+    font-size: .9rem;
+  }
+  .text-\[\.75rem\] {
+    font-size: .75rem;
+  }
+  .text-\[\.7rem\] {
+    font-size: .7rem;
+  }
+  .text-\[\.85rem\] {
+    font-size: .85rem;
+  }
+  .text-\[\.8rem\] {
+    font-size: .8rem;
+  }
+  .text-\[\.95rem\] {
+    font-size: .95rem;
+  }
+  .text-\[0\.9rem\] {
+    font-size: 0.9rem;
+  }
+  .text-\[0\.65rem\] {
+    font-size: 0.65rem;
+  }
+  .text-\[0\.75rem\] {
+    font-size: 0.75rem;
+  }
+  .text-\[0\.7rem\] {
+    font-size: 0.7rem;
+  }
+  .text-\[0\.85rem\] {
+    font-size: 0.85rem;
+  }
+  .text-\[0\.8rem\] {
+    font-size: 0.8rem;
+  }
+  .text-\[0\.95rem\] {
+    font-size: 0.95rem;
+  }
+  .text-\[1\.1rem\] {
+    font-size: 1.1rem;
+  }
+  .text-\[1\.2rem\] {
+    font-size: 1.2rem;
+  }
+  .text-\[1\.4rem\] {
+    font-size: 1.4rem;
+  }
+  .text-\[1\.05rem\] {
+    font-size: 1.05rem;
+  }
+  .text-\[1\.15rem\] {
+    font-size: 1.15rem;
+  }
+  .text-\[1\.25rem\] {
+    font-size: 1.25rem;
+  }
+  .text-\[10rem\] {
+    font-size: 10rem;
+  }
+  .text-\[12px\] {
+    font-size: 12px;
+  }
+  .text-\[1px\] {
+    font-size: 1px;
+  }
+  .text-\[1rem\] {
+    font-size: 1rem;
+  }
+  .text-\[20px\] {
+    font-size: 20px;
+  }
+  .text-\[calc\(1\.265rem_\+_0\.18vw\)\] {
+    font-size: calc(1.265rem + 0.18vw);
+  }
+  .text-\[calc\(1\.285rem_\+_0\.42vw\)\] {
+    font-size: calc(1.285rem + 0.42vw);
+  }
+  .text-\[calc\(1\.305rem_\+_0\.66vw\)\] {
+    font-size: calc(1.305rem + 0.66vw);
+  }
+  .text-\[calc\(1\.325rem_\+_0\.9vw\)\] {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+  .text-\[calc\(1\.345rem_\+_1\.14vw\)\] {
+    font-size: calc(1.345rem + 1.14vw);
+  }
+  .text-\[calc\(1\.365rem_\+_1\.38vw\)\] {
+    font-size: calc(1.365rem + 1.38vw);
+  }
+  .\!leading-\[1\.2\] {
+    --tw-leading: 1.2 !important;
+    line-height: 1.2 !important;
+  }
+  .\!leading-\[1\.4\] {
+    --tw-leading: 1.4 !important;
+    line-height: 1.4 !important;
+  }
+  .\!leading-\[1\.05\] {
+    --tw-leading: 1.05 !important;
+    line-height: 1.05 !important;
+  }
+  .\!leading-\[1\.15\] {
+    --tw-leading: 1.15 !important;
+    line-height: 1.15 !important;
+  }
+  .\!leading-\[1\.1\] {
+    --tw-leading: 1.1 !important;
+    line-height: 1.1 !important;
+  }
+  .\!leading-\[1\.7\] {
+    --tw-leading: 1.7 !important;
+    line-height: 1.7 !important;
+  }
+  .\!leading-\[1\.25\] {
+    --tw-leading: 1.25 !important;
+    line-height: 1.25 !important;
+  }
+  .\!leading-\[1\.35\] {
+    --tw-leading: 1.35 !important;
+    line-height: 1.35 !important;
+  }
+  .\!leading-\[1\.3\] {
+    --tw-leading: 1.3 !important;
+    line-height: 1.3 !important;
+  }
+  .\!leading-\[1\.45\] {
+    --tw-leading: 1.45 !important;
+    line-height: 1.45 !important;
+  }
+  .\!leading-\[1\.55\] {
+    --tw-leading: 1.55 !important;
+    line-height: 1.55 !important;
+  }
+  .\!leading-\[1\.5\] {
+    --tw-leading: 1.5 !important;
+    line-height: 1.5 !important;
+  }
+  .\!leading-\[1\.65\] {
+    --tw-leading: 1.65 !important;
+    line-height: 1.65 !important;
+  }
+  .\!leading-\[1\.6\] {
+    --tw-leading: 1.6 !important;
+    line-height: 1.6 !important;
+  }
+  .\!leading-\[2\.2rem\] {
+    --tw-leading: 2.2rem !important;
+    line-height: 2.2rem !important;
+  }
+  .\!leading-\[inherit\] {
+    --tw-leading: inherit !important;
+    line-height: inherit !important;
+  }
+  .\!leading-none {
+    --tw-leading: 1 !important;
+    line-height: 1 !important;
+  }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
+  .leading-\[1\.3\] {
+    --tw-leading: 1.3;
+    line-height: 1.3;
+  }
+  .leading-\[1\.05\] {
+    --tw-leading: 1.05;
+    line-height: 1.05;
+  }
+  .leading-\[1\.5\] {
+    --tw-leading: 1.5;
+    line-height: 1.5;
+  }
+  .leading-\[1\.7\] {
+    --tw-leading: 1.7;
+    line-height: 1.7;
+  }
+  .leading-\[1\.9\] {
+    --tw-leading: 1.9;
+    line-height: 1.9;
+  }
+  .leading-\[1\.35\] {
+    --tw-leading: 1.35;
+    line-height: 1.35;
+  }
+  .leading-\[1\.65\] {
+    --tw-leading: 1.65;
+    line-height: 1.65;
+  }
+  .leading-\[1\] {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  .leading-normal {
+    --tw-leading: var(--leading-normal);
+    line-height: var(--leading-normal);
+  }
+  .\!font-bold {
+    --tw-font-weight: var(--font-weight-bold) !important;
+    font-weight: var(--font-weight-bold) !important;
+  }
+  .\!font-medium {
+    --tw-font-weight: var(--font-weight-medium) !important;
+    font-weight: var(--font-weight-medium) !important;
+  }
+  .\!font-normal {
+    --tw-font-weight: var(--font-weight-normal) !important;
+    font-weight: var(--font-weight-normal) !important;
+  }
+  .\!font-semibold {
+    --tw-font-weight: var(--font-weight-semibold) !important;
+    font-weight: var(--font-weight-semibold) !important;
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\!tracking-\[-\.01rem\] {
+    --tw-tracking: -.01rem !important;
+    letter-spacing: -.01rem !important;
+  }
+  .\!tracking-\[-0\.01rem\] {
+    --tw-tracking: -0.01rem !important;
+    letter-spacing: -0.01rem !important;
+  }
+  .\!tracking-\[-0\.035em\] {
+    --tw-tracking: -0.035em !important;
+    letter-spacing: -0.035em !important;
+  }
+  .\!tracking-\[-0\.03em\] {
+    --tw-tracking: -0.03em !important;
+    letter-spacing: -0.03em !important;
+  }
+  .\!tracking-\[\.02rem\] {
+    --tw-tracking: .02rem !important;
+    letter-spacing: .02rem !important;
+  }
+  .\!tracking-\[\.05rem\] {
+    --tw-tracking: .05rem !important;
+    letter-spacing: .05rem !important;
+  }
+  .\!tracking-\[0\.02rem\] {
+    --tw-tracking: 0.02rem !important;
+    letter-spacing: 0.02rem !important;
+  }
+  .\!tracking-\[0\.05rem\] {
+    --tw-tracking: 0.05rem !important;
+    letter-spacing: 0.05rem !important;
+  }
+  .\!tracking-\[normal\] {
+    --tw-tracking: normal !important;
+    letter-spacing: normal !important;
+  }
+  .\!tracking-normal {
+    --tw-tracking: var(--tracking-normal) !important;
+    letter-spacing: var(--tracking-normal) !important;
+  }
+  .tracking-\[-\.01rem\] {
+    --tw-tracking: -.01rem;
+    letter-spacing: -.01rem;
+  }
+  .tracking-\[-\.03em\] {
+    --tw-tracking: -.03em;
+    letter-spacing: -.03em;
+  }
+  .tracking-\[-0\.035em\] {
+    --tw-tracking: -0.035em;
+    letter-spacing: -0.035em;
+  }
+  .tracking-\[-0\.03em\] {
+    --tw-tracking: -0.03em;
+    letter-spacing: -0.03em;
+  }
+  .tracking-\[\.02rem\] {
+    --tw-tracking: .02rem;
+    letter-spacing: .02rem;
+  }
+  .tracking-\[\.05rem\] {
+    --tw-tracking: .05rem;
+    letter-spacing: .05rem;
+  }
+  .tracking-\[normal\] {
+    --tw-tracking: normal;
+    letter-spacing: normal;
+  }
+  .tracking-normal {
+    --tw-tracking: var(--tracking-normal);
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-balance {
+    text-wrap: balance;
+  }
+  .text-nowrap {
+    text-wrap: nowrap;
+  }
+  .text-pretty {
+    text-wrap: pretty;
+  }
+  .text-wrap {
+    text-wrap: wrap;
+  }
+  .break-normal {
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+  .break-words {
+    overflow-wrap: break-word;
+  }
+  .break-all {
+    word-break: break-all;
+  }
+  .break-keep {
+    word-break: keep-all;
+  }
+  .overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+  .text-clip {
+    text-overflow: clip;
+  }
+  .text-ellipsis {
+    text-overflow: ellipsis;
+  }
+  .hyphens-auto {
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+  .hyphens-manual {
+    -webkit-hyphens: manual;
+    hyphens: manual;
+  }
+  .hyphens-none {
+    -webkit-hyphens: none;
+    hyphens: none;
+  }
+  .\!whitespace-nowrap {
+    white-space: nowrap !important;
+  }
+  .whitespace-break-spaces {
+    white-space: break-spaces;
+  }
+  .whitespace-normal {
+    white-space: normal;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .whitespace-pre {
+    white-space: pre;
+  }
+  .whitespace-pre-line {
+    white-space: pre-line;
+  }
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+  .\!text-\[\#1b1e23\] {
+    color: #1b1e23 !important;
+  }
+  .\!text-\[\#54a8c7\] {
+    color: #54a8c7 !important;
+  }
+  .\!text-\[\#5d82a4\] {
+    color: #5d82a4 !important;
+  }
+  .\!text-\[\#5daed5\] {
+    color: #5daed5 !important;
+  }
+  .\!text-\[\#5eb9f0\] {
+    color: #5eb9f0 !important;
+  }
+  .\!text-\[\#7cb798\] {
+    color: #7cb798 !important;
+  }
+  .\!text-\[\#9e454b\] {
+    color: #9e454b !important;
+  }
+  .\!text-\[\#262b32\] {
+    color: #262b32 !important;
+  }
+  .\!text-\[\#2c549d\] {
+    color: #2c549d !important;
+  }
+  .\!text-\[\#343f52\] {
+    color: #343f52 !important;
+  }
+  .\!text-\[\#e31e24\] {
+    color: #e31e24 !important;
+  }
+  .\!text-\[\#747ed1\] {
+    color: #747ed1 !important;
+  }
+  .\!text-\[\#777b84\] {
+    color: #777b84 !important;
+  }
+  .\!text-\[\#959ca9\] {
+    color: #959ca9 !important;
+  }
+  .\!text-\[\#3393c1\] {
+    color: #3393c1 !important;
+  }
+  .\!text-\[\#9499a3\] {
+    color: #9499a3 !important;
+  }
+  .\!text-\[\#60697b\] {
+    color: #60697b !important;
+  }
+  .\!text-\[\#308970\] {
+    color: #308970 !important;
+  }
+  .\!text-\[\#3b768b\] {
+    color: #3b768b !important;
+  }
+  .\!text-\[\#3f78e0\] {
+    color: #3f78e0 !important;
+  }
+  .\!text-\[\#45c4a0\] {
+    color: #45c4a0 !important;
+  }
+  .\!text-\[\#4470cf\] {
+    color: #4470cf !important;
+  }
+  .\!text-\[\#a07cc5\] {
+    color: #a07cc5 !important;
+  }
+  .\!text-\[\#aab0bc\] {
+    color: #aab0bc !important;
+  }
+  .\!text-\[\#af803e\] {
+    color: #af803e !important;
+  }
+  .\!text-\[\#b2b2b2\] {
+    color: #b2b2b2 !important;
+  }
+  .\!text-\[\#c8312b\] {
+    color: #c8312b !important;
+  }
+  .\!text-\[\#cacaca\] {
+    color: #cacaca !important;
+  }
+  .\!text-\[\#d16b86\] {
+    color: #d16b86 !important;
+  }
+  .\!text-\[\#d4135c\] {
+    color: #d4135c !important;
+  }
+  .\!text-\[\#d53581\] {
+    color: #d53581 !important;
+  }
+  .\!text-\[\#e94d88\] {
+    color: #e94d88 !important;
+  }
+  .\!text-\[\#e668b3\] {
+    color: #e668b3 !important;
+  }
+  .\!text-\[\#e2626b\] {
+    color: #e2626b !important;
+  }
+  .\!text-\[\#edf2fc\] {
+    color: #edf2fc !important;
+  }
+  .\!text-\[\#f0f8fe\] {
+    color: #f0f8fe !important;
+  }
+  .\!text-\[\#f2f3fb\] {
+    color: #f2f3fb !important;
+  }
+  .\!text-\[\#f6f7f9\] {
+    color: #f6f7f9 !important;
+  }
+  .\!text-\[\#f78b77\] {
+    color: #f78b77 !important;
+  }
+  .\!text-\[\#fab758\] {
+    color: #fab758 !important;
+  }
+  .\!text-\[\#fefefe\] {
+    color: #fefefe !important;
+  }
+  .\!text-inherit {
+    color: inherit !important;
+  }
+  .\!text-white {
+    color: var(--color-white) !important;
+  }
+  .\[color\:red\] {
+    color: red;
+  }
+  .\[color\:red\]\/50 {
+    color: color-mix(in oklab, red 50%, transparent);
+  }
+  .\[color\:red\]\/50\! {
+    color: color-mix(in oklab, red 50%, transparent) !important;
+  }
+  .text-\[\#5eb9f0\] {
+    color: #5eb9f0;
+  }
+  .text-\[\#22c55e\] {
+    color: #22c55e;
+  }
+  .text-\[\#343f52\] {
+    color: #343f52;
+  }
+  .text-\[\#3f78e0\] {
+    color: #3f78e0;
+  }
+  .text-\[\#45c4a0\] {
+    color: #45c4a0;
+  }
+  .text-\[\#54a8c7\] {
+    color: #54a8c7;
+  }
+  .text-\[\#e31e24\] {
+    color: #e31e24;
+  }
+  .text-\[\#747ed1\] {
+    color: #747ed1;
+  }
+  .text-\[\#7cb798\] {
+    color: #7cb798;
+  }
+  .text-\[\#9499a3\] {
+    color: #9499a3;
+  }
+  .text-\[\#60697b\] {
+    color: #60697b;
+  }
+  .text-\[\#a07cc5\] {
+    color: #a07cc5;
+  }
+  .text-\[\#aab0bc\] {
+    color: #aab0bc;
+  }
+  .text-\[\#d16b86\] {
+    color: #d16b86;
+  }
+  .text-\[\#e668b3\] {
+    color: #e668b3;
+  }
+  .text-\[\#e2626b\] {
+    color: #e2626b;
+  }
+  .text-\[\#f78b77\] {
+    color: #f78b77;
+  }
+  .text-\[\#fab758\] {
+    color: #fab758;
+  }
+  .text-\[\#your_color_code\] {
+    color: #your color code;
+  }
+  .text-inherit {
+    color: inherit;
+  }
+  .text-transparent {
+    color: transparent;
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .capitalize {
+    text-transform: capitalize;
+  }
+  .lowercase {
+    text-transform: lowercase;
+  }
+  .normal-case {
+    text-transform: none;
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .not-italic {
+    font-style: normal;
+  }
+  .font-stretch-condensed {
+    font-stretch: condensed;
+  }
+  .font-stretch-expanded {
+    font-stretch: expanded;
+  }
+  .font-stretch-extra-condensed {
+    font-stretch: extra-condensed;
+  }
+  .font-stretch-extra-expanded {
+    font-stretch: extra-expanded;
+  }
+  .font-stretch-normal {
+    font-stretch: normal;
+  }
+  .font-stretch-semi-condensed {
+    font-stretch: semi-condensed;
+  }
+  .font-stretch-semi-expanded {
+    font-stretch: semi-expanded;
+  }
+  .font-stretch-ultra-condensed {
+    font-stretch: ultra-condensed;
+  }
+  .font-stretch-ultra-expanded {
+    font-stretch: ultra-expanded;
+  }
+  .diagonal-fractions {
+    --tw-numeric-fraction: diagonal-fractions;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  .lining-nums {
+    --tw-numeric-figure: lining-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  .normal-nums {
+    font-variant-numeric: normal;
+  }
+  .oldstyle-nums {
+    --tw-numeric-figure: oldstyle-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  .ordinal {
+    --tw-ordinal: ordinal;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  .proportional-nums {
+    --tw-numeric-spacing: proportional-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  .slashed-zero {
+    --tw-slashed-zero: slashed-zero;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  .stacked-fractions {
+    --tw-numeric-fraction: stacked-fractions;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  .line-through {
+    text-decoration-line: line-through;
+  }
+  .no-underline {
+    text-decoration-line: none;
+  }
+  .overline {
+    text-decoration-line: overline;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .decoration-dashed {
+    text-decoration-style: dashed;
+  }
+  .decoration-dotted {
+    text-decoration-style: dotted;
+  }
+  .decoration-double {
+    text-decoration-style: double;
+  }
+  .decoration-solid {
+    text-decoration-style: solid;
+  }
+  .decoration-wavy {
+    text-decoration-style: wavy;
+  }
+  .decoration-auto {
+    text-decoration-thickness: auto;
+  }
+  .decoration-from-font {
+    text-decoration-thickness: from-font;
+  }
+  .underline-offset-auto {
+    text-underline-offset: auto;
+  }
+  .antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .subpixel-antialiased {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+  .accent-auto {
+    accent-color: auto;
+  }
+  .scheme-dark {
+    color-scheme: dark;
+  }
+  .scheme-light {
+    color-scheme: light;
+  }
+  .scheme-light-dark {
+    color-scheme: light dark;
+  }
+  .scheme-normal {
+    color-scheme: normal;
+  }
+  .scheme-only-dark {
+    color-scheme: only dark;
+  }
+  .scheme-only-light {
+    color-scheme: only light;
+  }
+  .\!opacity-100 {
+    opacity: 100% !important;
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-25 {
+    opacity: 25%;
+  }
+  .opacity-50 {
+    opacity: 50%;
+  }
+  .opacity-75 {
+    opacity: 75%;
+  }
+  .opacity-90 {
+    opacity: 90%;
+  }
+  .opacity-100 {
+    opacity: 100%;
+  }
+  .opacity-900 {
+    opacity: 900%;
+  }
+  .mix-blend-plus-darker {
+    mix-blend-mode: plus-darker;
+  }
+  .mix-blend-plus-lighter {
+    mix-blend-mode: plus-lighter;
+  }
+  .\!shadow-\[0_0\.25rem_0\.75rem_rgba\(30\,34\,40\,0\.02\)\] {
+    --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.02)) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .\!shadow-\[0_0\.25rem_1\.75rem_rgba\(30\,34\,40\,0\.07\)\] {
+    --tw-shadow: 0 0.25rem 1.75rem var(--tw-shadow-color, rgba(30,34,40,0.07)) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .\!shadow-none {
+    --tw-shadow: 0 0 #0000 !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .inset-ring {
+    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_0\.25rem_0\.75rem_rgba\(30\,34\,40\,0\.02\)\] {
+    --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.02));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_0\.25rem_1\.75rem_rgba\(30\,34\,40\,0\.07\)\] {
+    --tw-shadow: 0 0.25rem 1.75rem var(--tw-shadow-color, rgba(30,34,40,0.07));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_0_1\.25rem_rgba\(30\,34\,40\,0\.04\)\] {
+    --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[inset_0_0_0_0\.1rem_rgba\(128\,130\,134\,0\.25\)\] {
+    --tw-shadow: inset 0 0 0 0.1rem var(--tw-shadow-color, rgba(128,130,134,0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .\!shadow-\[rgba\(30\,34\,40\,0\.02\)_0_2px_1px\,rgba\(30\,34\,40\,0\.02\)_0_4px_2px\,rgba\(30\,34\,40\,0\.02\)_0_8px_4px\,rgba\(30\,34\,40\,0\.02\)_0_16px_8px\,rgba\(30\,34\,40\,0\.03\)_0_32px_16px\] {
+    --tw-shadow-color: rgba(30,34,40,0.02) 0 2px 1px,rgba(30,34,40,0.02) 0 4px 2px,rgba(30,34,40,0.02) 0 8px 4px,rgba(30,34,40,0.02) 0 16px 8px,rgba(30,34,40,0.03) 0 32px 16px !important;
+  }
+  .\!shadow-\[rgba\(30\,34\,40\,0\.06\)_0px_0px_25px_0px\] {
+    --tw-shadow-color: rgba(30,34,40,0.06) 0px 0px 25px 0px !important;
+  }
+  .shadow-\[rgba\(30\,34\,40\,0\.02\)_0_2px_1px\,rgba\(30\,34\,40\,0\.02\)_0_4px_2px\,rgba\(30\,34\,40\,0\.02\)_0_8px_4px\,rgba\(30\,34\,40\,0\.02\)_0_16px_8px\,rgba\(30\,34\,40\,0\.03\)_0_32px_16px\] {
+    --tw-shadow-color: rgba(30,34,40,0.02) 0 2px 1px,rgba(30,34,40,0.02) 0 4px 2px,rgba(30,34,40,0.02) 0 8px 4px,rgba(30,34,40,0.02) 0 16px 8px,rgba(30,34,40,0.03) 0 32px 16px;
+  }
+  .shadow-initial {
+    --tw-shadow-color: initial;
+  }
+  .inset-shadow-initial {
+    --tw-inset-shadow-color: initial;
+  }
+  .outline-hidden {
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .blur {
+    --tw-blur: blur(8px);
+    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,);
+  }
+  .blur-none {
+    --tw-blur:  ;
+    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,);
+  }
+  .drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
+    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,);
+  }
+  .drop-shadow-none {
+    --tw-drop-shadow:  ;
+    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,);
+  }
+  .grayscale {
+    --tw-grayscale: grayscale(100%);
+    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,);
+  }
+  .invert {
+    --tw-invert: invert(100%);
+    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,);
+  }
+  .sepia {
+    --tw-sepia: sepia(100%);
+    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,);
+  }
+  .\!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,) !important;
+  }
+  .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,);
+  }
+  .backdrop-blur {
+    --tw-backdrop-blur: blur(8px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-blur-none {
+    --tw-backdrop-blur:  ;
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .\!transition-all {
+    transition-property: all !important;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
+    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[0\.3s\] {
+    transition-property: 0.3s;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[border-color\] {
+    transition-property: border-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-none {
+    transition-property: none;
+  }
+  .transition-discrete {
+    transition-behavior: allow-discrete;
+  }
+  .transition-normal {
+    transition-behavior: normal;
+  }
+  .delay-\[0s\] {
+    transition-delay: 0s;
+  }
+  .\!duration-\[0\.35s\] {
+    --tw-duration: 0.35s !important;
+    transition-duration: 0.35s !important;
+  }
+  .duration-1 {
+    --tw-duration: 1ms;
+    transition-duration: 1ms;
+  }
+  .duration-\[0\.2s\] {
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+  }
+  .duration-\[0\.3s\] {
+    --tw-duration: 0.3s;
+    transition-duration: 0.3s;
+  }
+  .duration-\[0\.15s\] {
+    --tw-duration: 0.15s;
+    transition-duration: 0.15s;
+  }
+  .duration-\[0\.35s\] {
+    --tw-duration: 0.35s;
+    transition-duration: 0.35s;
+  }
+  .duration-\[ease-in-out\] {
+    --tw-duration: ease-in-out;
+    transition-duration: ease-in-out;
+  }
+  .\!ease-in-out {
+    --tw-ease: var(--ease-in-out) !important;
+    transition-timing-function: var(--ease-in-out) !important;
+  }
+  .ease-\[ease-in-out\] {
+    --tw-ease: ease-in-out;
+    transition-timing-function: ease-in-out;
+  }
+  .ease-\[linear\,margin-right\] {
+    --tw-ease: linear,margin-right;
+    transition-timing-function: linear,margin-right;
+  }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .ease-linear {
+    --tw-ease: linear;
+    transition-timing-function: linear;
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .will-change-auto {
+    will-change: auto;
+  }
+  .will-change-contents {
+    will-change: contents;
+  }
+  .will-change-scroll {
+    will-change: scroll-position;
+  }
+  .will-change-transform {
+    will-change: transform;
+  }
+  .contain-content {
+    contain: content;
+  }
+  .contain-inline-size {
+    --tw-contain-size: inline-size;
+    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
+  }
+  .contain-layout {
+    --tw-contain-layout: layout;
+    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
+  }
+  .contain-none {
+    contain: none;
+  }
+  .contain-paint {
+    --tw-contain-paint: paint;
+    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
+  }
+  .contain-size {
+    --tw-contain-size: size;
+    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
+  }
+  .contain-strict {
+    contain: strict;
+  }
+  .contain-style {
+    --tw-contain-style: style;
+    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
+  }
+  .content-none {
+    --tw-content: none;
+    content: none;
+  }
+  .forced-color-adjust-auto {
+    forced-color-adjust: auto;
+  }
+  .forced-color-adjust-none {
+    forced-color-adjust: none;
+  }
+  .\[border-top\:1px_solid\] {
+    border-top: 1px solid;
+  }
+  .\[hostname\:port\] {
+    hostname: port;
+  }
+  .\[keywords\:node-addon-api\] {
+    keywords: node-addon-api;
+  }
+  .\[word-spacing\:\.05rem\!important\] {
+    word-spacing: .05rem!important;
+  }
+  .\[word-spacing\:0\.1rem\] {
+    word-spacing: 0.1rem;
+  }
+  .\[word-spacing\:normal\!important\] {
+    word-spacing: normal!important;
+  }
+  .backface-hidden {
+    backface-visibility: hidden;
+  }
+  .backface-visible {
+    backface-visibility: visible;
+  }
+  .divide-x-reverse {
+    :where(& > :not(:last-child)) {
+      --tw-divide-x-reverse: 1;
+    }
+  }
+  .duration-initial {
+    --tw-duration: initial;
+  }
+  .ease-initial {
+    --tw-ease: initial;
+  }
+  .outline-dashed {
+    --tw-outline-style: dashed;
+    outline-style: dashed;
+  }
+  .outline-dotted {
+    --tw-outline-style: dotted;
+    outline-style: dotted;
+  }
+  .outline-double {
+    --tw-outline-style: double;
+    outline-style: double;
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .outline-solid {
+    --tw-outline-style: solid;
+    outline-style: solid;
+  }
+  .perspective-none {
+    perspective: none;
+  }
+  .perspective-origin-bottom {
+    perspective-origin: bottom;
+  }
+  .perspective-origin-bottom-left {
+    perspective-origin: bottom left;
+  }
+  .perspective-origin-bottom-right {
+    perspective-origin: bottom right;
+  }
+  .perspective-origin-center {
+    perspective-origin: center;
+  }
+  .perspective-origin-left {
+    perspective-origin: left;
+  }
+  .perspective-origin-right {
+    perspective-origin: right;
+  }
+  .perspective-origin-top {
+    perspective-origin: top;
+  }
+  .perspective-origin-top-left {
+    perspective-origin: top left;
+  }
+  .perspective-origin-top-right {
+    perspective-origin: top right;
+  }
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
+  .transform-3d {
+    transform-style: preserve-3d;
+  }
+  .transform-border {
+    transform-box: border-box;
+  }
+  .transform-content {
+    transform-box: content-box;
+  }
+  .transform-fill {
+    transform-box: fill-box;
+  }
+  .transform-flat {
+    transform-style: flat;
+  }
+  .transform-stroke {
+    transform-box: stroke-box;
+  }
+  .transform-view {
+    transform-box: view-box;
+  }
+  .group-hover\:right-4 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        right: calc(var(--spacing) * 4);
+      }
+    }
+  }
+  .group-hover\:right-\[1rem\] {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        right: 1rem;
+      }
+    }
+  }
+  .group-hover\:bottom-0 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        bottom: calc(var(--spacing) * 0);
+      }
+    }
+  }
+  .group-hover\:-translate-y-2\/4 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .group-hover\:scale-105 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-scale-x: 105%;
+        --tw-scale-y: 105%;
+        --tw-scale-z: 105%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .group-hover\:\!text-\[\#fab758\] {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: #fab758 !important;
+      }
+    }
+  }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .group-hover\:shadow-\[0_0\.25rem_0\.75rem_rgba\(30\,34\,40\,0\.15\)\] {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.15));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .file\:pointer-events-none {
+    &::file-selector-button {
+      pointer-events: none;
+    }
+  }
+  .file\:\!mt-\[-0\.4rem\] {
+    &::file-selector-button {
+      margin-top: -0.4rem !important;
+    }
+  }
+  .file\:\!mt-\[-0\.6rem\] {
+    &::file-selector-button {
+      margin-top: -0.6rem !important;
+    }
+  }
+  .file\:mr-\[-0\.6rem\] {
+    &::file-selector-button {
+      margin-right: -0.6rem;
+    }
+  }
+  .file\:mr-\[-1rem\] {
+    &::file-selector-button {
+      margin-right: -1rem;
+    }
+  }
+  .file\:\!mb-\[-0\.4rem\] {
+    &::file-selector-button {
+      margin-bottom: -0.4rem !important;
+    }
+  }
+  .file\:\!mb-\[-0\.6rem\] {
+    &::file-selector-button {
+      margin-bottom: -0.6rem !important;
+    }
+  }
+  .file\:ml-\[-0\.6rem\] {
+    &::file-selector-button {
+      margin-left: -0.6rem;
+    }
+  }
+  .file\:ml-\[-1rem\] {
+    &::file-selector-button {
+      margin-left: -1rem;
+    }
+  }
+  .file\:rounded-none {
+    &::file-selector-button {
+      border-radius: 0;
+    }
+  }
+  .file\:bg-\[\#fefefe\] {
+    &::file-selector-button {
+      background-color: #fefefe;
+    }
+  }
+  .file\:\!px-\[0\.6rem\] {
+    &::file-selector-button {
+      padding-inline: 0.6rem !important;
+    }
+  }
+  .file\:px-4 {
+    &::file-selector-button {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .file\:py-\[0\.4rem\] {
+    &::file-selector-button {
+      padding-block: 0.4rem;
+    }
+  }
+  .file\:py-\[0\.6rem\] {
+    &::file-selector-button {
+      padding-block: 0.6rem;
+    }
+  }
+  .file\:\!text-\[\#60697b\] {
+    &::file-selector-button {
+      color: #60697b !important;
+    }
+  }
+  .file\:transition-all {
+    &::file-selector-button {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .file\:duration-\[0\.2s\] {
+    &::file-selector-button {
+      --tw-duration: 0.2s;
+      transition-duration: 0.2s;
+    }
+  }
+  .file\:ease-in-out {
+    &::file-selector-button {
+      --tw-ease: var(--ease-in-out);
+      transition-timing-function: var(--ease-in-out);
+    }
+  }
+  .placeholder\:\!text-\[\#959ca9\] {
+    &::placeholder {
+      color: #959ca9 !important;
+    }
+  }
+  .placeholder\:opacity-100 {
+    &::placeholder {
+      opacity: 100%;
+    }
+  }
+  .before\:pointer-events-none {
+    &::before {
+      content: var(--tw-content);
+      pointer-events: none;
+    }
+  }
+  .before\:absolute {
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .before\:inset-0 {
+    &::before {
+      content: var(--tw-content);
+      inset: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:\!top-\[52\%\] {
+    &::before {
+      content: var(--tw-content);
+      top: 52% !important;
+    }
+  }
+  .before\:top-0 {
+    &::before {
+      content: var(--tw-content);
+      top: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:top-2\/4 {
+    &::before {
+      content: var(--tw-content);
+      top: calc(2/4 * 100%);
+    }
+  }
+  .before\:top-\[-0\.15rem\] {
+    &::before {
+      content: var(--tw-content);
+      top: -0.15rem;
+    }
+  }
+  .before\:top-\[-1\.5rem\] {
+    &::before {
+      content: var(--tw-content);
+      top: -1.5rem;
+    }
+  }
+  .before\:top-\[-4rem\] {
+    &::before {
+      content: var(--tw-content);
+      top: -4rem;
+    }
+  }
+  .before\:top-\[0\.2rem\] {
+    &::before {
+      content: var(--tw-content);
+      top: 0.2rem;
+    }
+  }
+  .before\:top-\[52\%\] {
+    &::before {
+      content: var(--tw-content);
+      top: 52%;
+    }
+  }
+  .before\:right-0 {
+    &::before {
+      content: var(--tw-content);
+      right: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:right-3 {
+    &::before {
+      content: var(--tw-content);
+      right: calc(var(--spacing) * 3);
+    }
+  }
+  .before\:right-auto {
+    &::before {
+      content: var(--tw-content);
+      right: auto;
+    }
+  }
+  .before\:-bottom-px {
+    &::before {
+      content: var(--tw-content);
+      bottom: -1px;
+    }
+  }
+  .before\:left-0 {
+    &::before {
+      content: var(--tw-content);
+      left: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:left-2\/4 {
+    &::before {
+      content: var(--tw-content);
+      left: calc(2/4 * 100%);
+    }
+  }
+  .before\:left-\[-0\.9rem\] {
+    &::before {
+      content: var(--tw-content);
+      left: -0.9rem;
+    }
+  }
+  .before\:z-0 {
+    &::before {
+      content: var(--tw-content);
+      z-index: 0;
+    }
+  }
+  .before\:z-\[-1\] {
+    &::before {
+      content: var(--tw-content);
+      z-index: -1;
+    }
+  }
+  .before\:z-\[1\] {
+    &::before {
+      content: var(--tw-content);
+      z-index: 1;
+    }
+  }
+  .before\:z-\[9\] {
+    &::before {
+      content: var(--tw-content);
+      z-index: 9;
+    }
+  }
+  .before\:m-0 {
+    &::before {
+      content: var(--tw-content);
+      margin: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:m-\[0_\.6rem_0\] {
+    &::before {
+      content: var(--tw-content);
+      margin: 0 .6rem 0;
+    }
+  }
+  .before\:m-\[0_\.6rem_0_\.4rem\] {
+    &::before {
+      content: var(--tw-content);
+      margin: 0 .6rem 0 .4rem;
+    }
+  }
+  .before\:mx-\[0\.6rem\] {
+    &::before {
+      content: var(--tw-content);
+      margin-inline: 0.6rem;
+    }
+  }
+  .before\:my-0 {
+    &::before {
+      content: var(--tw-content);
+      margin-block: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:-mt-px {
+    &::before {
+      content: var(--tw-content);
+      margin-top: -1px;
+    }
+  }
+  .before\:mr-\[0\.8rem\] {
+    &::before {
+      content: var(--tw-content);
+      margin-right: 0.8rem;
+    }
+  }
+  .before\:ml-2 {
+    &::before {
+      content: var(--tw-content);
+      margin-left: calc(var(--spacing) * 2);
+    }
+  }
+  .before\:\!flex {
+    &::before {
+      content: var(--tw-content);
+      display: flex !important;
+    }
+  }
+  .before\:block {
+    &::before {
+      content: var(--tw-content);
+      display: block;
+    }
+  }
+  .before\:inline-block {
+    &::before {
+      content: var(--tw-content);
+      display: inline-block;
+    }
+  }
+  .before\:table-cell {
+    &::before {
+      content: var(--tw-content);
+      display: table-cell;
+    }
+  }
+  .before\:h-\[0\.2rem\] {
+    &::before {
+      content: var(--tw-content);
+      height: 0.2rem;
+    }
+  }
+  .before\:h-\[0\.05rem\] {
+    &::before {
+      content: var(--tw-content);
+      height: 0.05rem;
+    }
+  }
+  .before\:h-\[0\.55rem\] {
+    &::before {
+      content: var(--tw-content);
+      height: 0.55rem;
+    }
+  }
+  .before\:h-\[1\.8rem\] {
+    &::before {
+      content: var(--tw-content);
+      height: 1.8rem;
+    }
+  }
+  .before\:h-\[3px\] {
+    &::before {
+      content: var(--tw-content);
+      height: 3px;
+    }
+  }
+  .before\:h-\[110\%\] {
+    &::before {
+      content: var(--tw-content);
+      height: 110%;
+    }
+  }
+  .before\:h-full {
+    &::before {
+      content: var(--tw-content);
+      height: 100%;
+    }
+  }
+  .before\:w-3 {
+    &::before {
+      content: var(--tw-content);
+      width: calc(var(--spacing) * 3);
+    }
+  }
+  .before\:w-\[0\.2rem\] {
+    &::before {
+      content: var(--tw-content);
+      width: 0.2rem;
+    }
+  }
+  .before\:w-\[0\.55rem\] {
+    &::before {
+      content: var(--tw-content);
+      width: 0.55rem;
+    }
+  }
+  .before\:w-\[1\.8rem\] {
+    &::before {
+      content: var(--tw-content);
+      width: 1.8rem;
+    }
+  }
+  .before\:w-\[111\%\] {
+    &::before {
+      content: var(--tw-content);
+      width: 111%;
+    }
+  }
+  .before\:w-full {
+    &::before {
+      content: var(--tw-content);
+      width: 100%;
+    }
+  }
+  .before\:origin-\[100\%_50\%\] {
+    &::before {
+      content: var(--tw-content);
+      transform-origin: 100% 50%;
+    }
+  }
+  .before\:-translate-x-2\/4 {
+    &::before {
+      content: var(--tw-content);
+      --tw-translate-x: calc(calc(2/4 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .before\:-translate-y-2\/4 {
+    &::before {
+      content: var(--tw-content);
+      --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .before\:translate-x-\[-52\%\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-translate-x: -52%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .before\:translate-y-\[-60\%\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-translate-y: -60%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .before\:-rotate-1 {
+    &::before {
+      content: var(--tw-content);
+      rotate: calc(1deg * -1);
+    }
+  }
+  .before\:animate-\[ripple-1_2s_infinite_ease-in-out\] {
+    &::before {
+      content: var(--tw-content);
+      animation: ripple-1 2s infinite ease-in-out;
+    }
+  }
+  .before\:items-center {
+    &::before {
+      content: var(--tw-content);
+      align-items: center;
+    }
+  }
+  .before\:justify-center {
+    &::before {
+      content: var(--tw-content);
+      justify-content: center;
+    }
+  }
+  .before\:overflow-hidden {
+    &::before {
+      content: var(--tw-content);
+      overflow: hidden;
+    }
+  }
+  .before\:\!rounded-\[\.4rem\] {
+    &::before {
+      content: var(--tw-content);
+      border-radius: .4rem !important;
+    }
+  }
+  .before\:rounded-\[0\.4rem\] {
+    &::before {
+      content: var(--tw-content);
+      border-radius: 0.4rem;
+    }
+  }
+  .before\:rounded-\[50\%\] {
+    &::before {
+      content: var(--tw-content);
+      border-radius: 50%;
+    }
+  }
+  .before\:rounded-\[80\%\] {
+    &::before {
+      content: var(--tw-content);
+      border-radius: 80%;
+    }
+  }
+  .before\:rounded-\[100\%\] {
+    &::before {
+      content: var(--tw-content);
+      border-radius: 100%;
+    }
+  }
+  .before\:border-0 {
+    &::before {
+      content: var(--tw-content);
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .before\:border-\[3px\] {
+    &::before {
+      content: var(--tw-content);
+      border-style: var(--tw-border-style);
+      border-width: 3px;
+    }
+  }
+  .before\:border-t-0 {
+    &::before {
+      content: var(--tw-content);
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0px;
+    }
+  }
+  .before\:border-t-\[4rem\] {
+    &::before {
+      content: var(--tw-content);
+      border-top-style: var(--tw-border-style);
+      border-top-width: 4rem;
+    }
+  }
+  .before\:border-r-\[100vw\] {
+    &::before {
+      content: var(--tw-content);
+      border-right-style: var(--tw-border-style);
+      border-right-width: 100vw;
+    }
+  }
+  .before\:border-l-\[100vw\] {
+    &::before {
+      content: var(--tw-content);
+      border-left-style: var(--tw-border-style);
+      border-left-width: 100vw;
+    }
+  }
+  .before\:border-solid {
+    &::before {
+      content: var(--tw-content);
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .before\:border-\[\#3f78e0\] {
+    &::before {
+      content: var(--tw-content);
+      border-color: #3f78e0;
+    }
+  }
+  .before\:border-\[\#262b32\] {
+    &::before {
+      content: var(--tw-content);
+      border-color: #262b32;
+    }
+  }
+  .before\:border-\[\#e2626b\] {
+    &::before {
+      content: var(--tw-content);
+      border-color: #e2626b;
+    }
+  }
+  .before\:border-\[\#fefefe\] {
+    &::before {
+      content: var(--tw-content);
+      border-color: #fefefe;
+    }
+  }
+  .before\:\!border-y-transparent {
+    &::before {
+      content: var(--tw-content);
+      border-block-color: transparent !important;
+    }
+  }
+  .before\:border-y-transparent {
+    &::before {
+      content: var(--tw-content);
+      border-block-color: transparent;
+    }
+  }
+  .before\:border-r-transparent {
+    &::before {
+      content: var(--tw-content);
+      border-right-color: transparent;
+    }
+  }
+  .before\:border-l-transparent {
+    &::before {
+      content: var(--tw-content);
+      border-left-color: transparent;
+    }
+  }
+  .before\:\!bg-\[\#54a8c7\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #54a8c7 !important;
+    }
+  }
+  .before\:\!bg-\[\#747ed1\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #747ed1 !important;
+    }
+  }
+  .before\:\!bg-\[\#ffffff\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #ffffff !important;
+    }
+  }
+  .before\:bg-\[\#343f52\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #343f52;
+    }
+  }
+  .before\:bg-\[\#3f78e0\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #3f78e0;
+    }
+  }
+  .before\:bg-\[\#7cb798\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #7cb798;
+    }
+  }
+  .before\:bg-\[\#45c4a0\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #45c4a0;
+    }
+  }
+  .before\:bg-\[\#54a8c7\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #54a8c7;
+    }
+  }
+  .before\:bg-\[\#747ed1\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #747ed1;
+    }
+  }
+  .before\:bg-\[\#a07cc5\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #a07cc5;
+    }
+  }
+  .before\:bg-\[\#aab0bc\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #aab0bc;
+    }
+  }
+  .before\:bg-\[\#d16b86\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #d16b86;
+    }
+  }
+  .before\:bg-\[\#e0e9fa\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #e0e9fa;
+    }
+  }
+  .before\:bg-\[\#e668b3\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #e668b3;
+    }
+  }
+  .before\:bg-\[\#e2626b\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #e2626b;
+    }
+  }
+  .before\:bg-\[\#f78b77\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #f78b77;
+    }
+  }
+  .before\:bg-\[\#fab758\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #fab758;
+    }
+  }
+  .before\:bg-\[\#ffffff\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: #ffffff;
+    }
+  }
+  .before\:bg-\[rgba\(0\,0\,0\,\.08\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: rgba(0,0,0,.08);
+    }
+  }
+  .before\:bg-\[rgba\(30\,34\,40\,\.2\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: rgba(30,34,40,.2);
+    }
+  }
+  .before\:bg-\[rgba\(30\,34\,40\,\.3\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: rgba(30,34,40,.3);
+    }
+  }
+  .before\:bg-\[rgba\(30\,34\,40\,\.4\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: rgba(30,34,40,.4);
+    }
+  }
+  .before\:bg-\[rgba\(30\,34\,40\,\.5\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: rgba(30,34,40,.5);
+    }
+  }
+  .before\:bg-\[rgba\(30\,34\,40\,0\.5\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: rgba(30,34,40,0.5);
+    }
+  }
+  .before\:bg-\[rgba\(255\,255\,255\,\.5\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: rgba(255,255,255,.5);
+    }
+  }
+  .before\:bg-\[rgba\(255\,255\,255\,\.6\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: rgba(255,255,255,.6);
+    }
+  }
+  .before\:bg-\[rgba\(255\,255\,255\,\.08\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-color: rgba(255,255,255,.08);
+    }
+  }
+  .before\:bg-\[url\(\.\/assets\/img\/photos\/lines\.png\)\] {
+    &::before {
+      content: var(--tw-content);
+      background-image: url(assets/img/photos/lines.png);
+    }
+  }
+  .before\:bg-cover {
+    &::before {
+      content: var(--tw-content);
+      background-size: cover;
+    }
+  }
+  .before\:bg-\[center_center\] {
+    &::before {
+      content: var(--tw-content);
+      background-position: center center;
+    }
+  }
+  .before\:bg-no-repeat {
+    &::before {
+      content: var(--tw-content);
+      background-repeat: no-repeat;
+    }
+  }
+  .before\:p-0 {
+    &::before {
+      content: var(--tw-content);
+      padding: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:pt-\[56\.25\%\] {
+    &::before {
+      content: var(--tw-content);
+      padding-top: 56.25%;
+    }
+  }
+  .before\:\!pr-2 {
+    &::before {
+      content: var(--tw-content);
+      padding-right: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .before\:\!pr-\[0\.2rem\] {
+    &::before {
+      content: var(--tw-content);
+      padding-right: 0.2rem !important;
+    }
+  }
+  .before\:align-\[\.15rem\] {
+    &::before {
+      content: var(--tw-content);
+      vertical-align: .15rem;
+    }
+  }
+  .before\:align-\[0\.15rem\] {
+    &::before {
+      content: var(--tw-content);
+      vertical-align: 0.15rem;
+    }
+  }
+  .before\:align-middle {
+    &::before {
+      content: var(--tw-content);
+      vertical-align: middle;
+    }
+  }
+  .before\:font-SansSerif {
+    &::before {
+      content: var(--tw-content);
+      font-family: var(--font-SansSerif);
+    }
+  }
+  .before\:font-Unicons {
+    &::before {
+      content: var(--tw-content);
+      font-family: var(--font-Unicons);
+    }
+  }
+  .before\:text-\[0\.9rem\] {
+    &::before {
+      content: var(--tw-content);
+      font-size: 0.9rem;
+    }
+  }
+  .before\:text-\[1\.05rem\] {
+    &::before {
+      content: var(--tw-content);
+      font-size: 1.05rem;
+    }
+  }
+  .before\:text-\[6\.5rem\] {
+    &::before {
+      content: var(--tw-content);
+      font-size: 6.5rem;
+    }
+  }
+  .before\:text-\[10rem\] {
+    &::before {
+      content: var(--tw-content);
+      font-size: 10rem;
+    }
+  }
+  .before\:text-\[1rem\] {
+    &::before {
+      content: var(--tw-content);
+      font-size: 1rem;
+    }
+  }
+  .before\:text-\[calc\(1\.285rem_\+_0\.42vw\)\] {
+    &::before {
+      content: var(--tw-content);
+      font-size: calc(1.285rem + 0.42vw);
+    }
+  }
+  .before\:leading-\[1\.8rem\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-leading: 1.8rem;
+      line-height: 1.8rem;
+    }
+  }
+  .before\:leading-none {
+    &::before {
+      content: var(--tw-content);
+      --tw-leading: 1;
+      line-height: 1;
+    }
+  }
+  .before\:font-normal {
+    &::before {
+      content: var(--tw-content);
+      --tw-font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-normal);
+    }
+  }
+  .before\:\!text-\[\#3f78e0\] {
+    &::before {
+      content: var(--tw-content);
+      color: #3f78e0 !important;
+    }
+  }
+  .before\:\!text-\[\#54a8c7\] {
+    &::before {
+      content: var(--tw-content);
+      color: #54a8c7 !important;
+    }
+  }
+  .before\:\!text-\[\#5eb9f0\] {
+    &::before {
+      content: var(--tw-content);
+      color: #5eb9f0 !important;
+    }
+  }
+  .before\:\!text-\[\#343f52\] {
+    &::before {
+      content: var(--tw-content);
+      color: #343f52 !important;
+    }
+  }
+  .before\:\!text-\[\#e31e24\] {
+    &::before {
+      content: var(--tw-content);
+      color: #e31e24 !important;
+    }
+  }
+  .before\:\!text-\[\#747ed1\] {
+    &::before {
+      content: var(--tw-content);
+      color: #747ed1 !important;
+    }
+  }
+  .before\:\!text-\[\#959ca9\] {
+    &::before {
+      content: var(--tw-content);
+      color: #959ca9 !important;
+    }
+  }
+  .before\:\!text-\[\#a07cc5\] {
+    &::before {
+      content: var(--tw-content);
+      color: #a07cc5 !important;
+    }
+  }
+  .before\:\!text-\[\#aab0bc\] {
+    &::before {
+      content: var(--tw-content);
+      color: #aab0bc !important;
+    }
+  }
+  .before\:\!text-\[\#d16b86\] {
+    &::before {
+      content: var(--tw-content);
+      color: #d16b86 !important;
+    }
+  }
+  .before\:\!text-\[\#f78b77\] {
+    &::before {
+      content: var(--tw-content);
+      color: #f78b77 !important;
+    }
+  }
+  .before\:\!text-\[\#fab758\] {
+    &::before {
+      content: var(--tw-content);
+      color: #fab758 !important;
+    }
+  }
+  .before\:\!text-\[\#fcc032\] {
+    &::before {
+      content: var(--tw-content);
+      color: #fcc032 !important;
+    }
+  }
+  .before\:text-\[rgba\(38\,43\,50\,0\.1\)\] {
+    &::before {
+      content: var(--tw-content);
+      color: rgba(38,43,50,0.1);
+    }
+  }
+  .before\:text-\[rgba\(52\,63\,82\,0\.05\)\] {
+    &::before {
+      content: var(--tw-content);
+      color: rgba(52,63,82,0.05);
+    }
+  }
+  .before\:text-\[rgba\(96\,105\,123\,\.35\)\] {
+    &::before {
+      content: var(--tw-content);
+      color: rgba(96,105,123,.35);
+    }
+  }
+  .before\:text-\[rgba\(96\,105\,123\,0\.35\)\] {
+    &::before {
+      content: var(--tw-content);
+      color: rgba(96,105,123,0.35);
+    }
+  }
+  .before\:text-\[rgba\(255\,255\,255\,\.5\)\] {
+    &::before {
+      content: var(--tw-content);
+      color: rgba(255,255,255,.5);
+    }
+  }
+  .before\:text-\[rgba\(255\,255\,255\,0\.35\)\] {
+    &::before {
+      content: var(--tw-content);
+      color: rgba(255,255,255,0.35);
+    }
+  }
+  .before\:text-white {
+    &::before {
+      content: var(--tw-content);
+      color: var(--color-white);
+    }
+  }
+  .before\:not-italic {
+    &::before {
+      content: var(--tw-content);
+      font-style: normal;
+    }
+  }
+  .before\:opacity-30 {
+    &::before {
+      content: var(--tw-content);
+      opacity: 30%;
+    }
+  }
+  .before\:opacity-50 {
+    &::before {
+      content: var(--tw-content);
+      opacity: 50%;
+    }
+  }
+  .before\:opacity-80 {
+    &::before {
+      content: var(--tw-content);
+      opacity: 80%;
+    }
+  }
+  .before\:opacity-100 {
+    &::before {
+      content: var(--tw-content);
+      opacity: 100%;
+    }
+  }
+  .before\:shadow-none {
+    &::before {
+      content: var(--tw-content);
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .before\:transition-\[background\] {
+    &::before {
+      content: var(--tw-content);
+      transition-property: background;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .before\:transition-all {
+    &::before {
+      content: var(--tw-content);
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .before\:transition-transform {
+    &::before {
+      content: var(--tw-content);
+      transition-property: transform, translate, scale, rotate;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .before\:duration-\[0\.2s\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-duration: 0.2s;
+      transition-duration: 0.2s;
+    }
+  }
+  .before\:duration-\[0\.3s\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-duration: 0.3s;
+      transition-duration: 0.3s;
+    }
+  }
+  .before\:duration-\[0\.5s\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-duration: 0.5s;
+      transition-duration: 0.5s;
+    }
+  }
+  .before\:ease-\[cubic-bezier\(\.7\,0\,0\.2\,1\)\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-ease: cubic-bezier(.7,0,0.2,1);
+      transition-timing-function: cubic-bezier(.7,0,0.2,1);
+    }
+  }
+  .before\:ease-\[ease-in-out\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-ease: ease-in-out;
+      transition-timing-function: ease-in-out;
+    }
+  }
+  .before\:ease-in-out {
+    &::before {
+      content: var(--tw-content);
+      --tw-ease: var(--ease-in-out);
+      transition-timing-function: var(--ease-in-out);
+    }
+  }
+  .before\:content-\[\'\#\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '#';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\2014\\a0\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\2014\a0';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\201c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\201c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\201d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\201d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\2022\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\2022';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\2605\\2605\\2605\\2605\\2605\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\2605\2605\2605\2605\2605';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e900\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e900';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e92c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e92c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e92e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e92e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e93d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e93d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e93e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e93e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e907\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e907';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e90a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e90a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e93f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e93f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e94a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e94a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e94b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e94b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e94c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e94c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e94d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e94d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e94e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e94e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e94f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e94f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e911\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e911';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e913\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e913';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e916\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e916';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e918\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e918';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e921\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e921';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e923\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e923';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e924\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e924';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e926\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e926';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e928\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e928';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e929\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e929';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e92a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e92a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e92b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e92b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e92d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e92d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e92f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e92f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e930\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e930';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e931\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e931';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e932\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e932';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e937\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e937';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e938\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e938';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e940\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e940';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e941\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e941';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e942\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e942';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e943\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e943';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e944\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e944';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e945\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e945';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e946\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e946';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e947\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e947';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e948\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e948';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e949\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e949';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e950\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e950';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e951\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e951';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e952\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e952';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e953\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e953';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e954\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e954';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e955\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e955';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e956\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e956';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e957\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e957';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e958\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e958';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e959\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e959';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e95a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e95a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e95b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e95b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e95c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e95c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e95d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e95d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e95e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e95e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e95f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e95f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e960\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e960';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e96c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e96c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e96e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e96e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e97b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e97b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e97c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e97c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e980\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e980';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e981\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e981';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e982\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e982';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e983\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e983';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e984\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e984';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e985\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e985';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e986\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e986';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e987\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e987';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e988\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e988';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9a5\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9a5';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9a6\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9a6';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9b3\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9b3';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9b8\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9b8';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9ba\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9ba';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9ca\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9ca';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9cf\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9cf';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9d0\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9d0';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9d1\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9d1';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9d2\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9d2';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9d3\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9d3';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9d4\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9d4';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9d5\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9d5';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9d6\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9d6';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9d7\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9d7';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9d8\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9d8';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9d9\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9d9';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9da\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9da';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9db\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9db';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9dd\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9dd';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\e9ee\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e9ee';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea1f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea1f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea3a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea3a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea21\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea21';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea22\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea22';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea23\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea23';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea24\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea24';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea25\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea25';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea26\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea26';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea27\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea27';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea28\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea28';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea29\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea29';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea41\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea41';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea54\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea54';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea56\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea56';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea58\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea58';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea5a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea5a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea5b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea5b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea5c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea5c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea5e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea5e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea67\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea67';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea68\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea68';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea69\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea69';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea6a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea6a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea6b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea6b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea6c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea6c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea6d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea6d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea6e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea6e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea6f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea6f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea74\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea74';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea79\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea79';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea7a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea7a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea7b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea7b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea7c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea7c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea93\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea93';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea95\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea95';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea98\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea98';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea9d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea9d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea9e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea9e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ea9f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ea9f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eaa0\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eaa0';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eaa2\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eaa2';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eaa4\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eaa4';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eaae\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eaae';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eac8\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eac8';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eacc\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eacc';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eacd\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eacd';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eace\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eace';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eacf\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eacf';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ead0\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ead0';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ead2\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ead2';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ead6\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ead6';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ead7\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ead7';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ead8\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ead8';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ead9\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ead9';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eada\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eada';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eadb\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eadb';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eadc\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eadc';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eae2\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eae2';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eae3\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eae3';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eae4\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eae4';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eae5\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eae5';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eaec\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eaec';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb3f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb3f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb4e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb4e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb4f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb4f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb22\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb22';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb40\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb40';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb41\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb41';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb49\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb49';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb4b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb4b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb4c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb4c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb4d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb4d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb50\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb50';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb52\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb52';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb60\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb60';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb66\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb66';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb69\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb69';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb79\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb79';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb7a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb7a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb7b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb7b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb7c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb7c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb7d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb7d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb95\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb95';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb96\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb96';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb99\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb99';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb9a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb9a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb9c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb9c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb9d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb9d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb9e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb9e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eb9f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eb9f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eba2\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eba2';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebb2\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebb2';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebbb\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebbb';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebbc\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebbc';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebc5\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebc5';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebc6\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebc6';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebcd\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebcd';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebce\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebce';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebcf\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebcf';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebd0\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebd0';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebd1\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebd1';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebd6\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebd6';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebd8\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebd8';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebd9\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebd9';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebda\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebda';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebdc\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebdc';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebde\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebde';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebec\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebec';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebee\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebee';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebf4\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebf4';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebfa\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebfa';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ebfe\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ebfe';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec03\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec03';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec0a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec0a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec0f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec0f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec10\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec10';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec12\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec12';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec13\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec13';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec14\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec14';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec15\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec15';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec16\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec16';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec17\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec17';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec19\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec19';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec31\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec31';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec32\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec32';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec33\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec33';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec37\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec37';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec39\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec39';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec3a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec3a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec3b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec3b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec48\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec48';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec4b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec4b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec50\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec50';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec62\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec62';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec63\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec63';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec66\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec66';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec68\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec68';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec6b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec6b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec75\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec75';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec77\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec77';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec7e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec7e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec7f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec7f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec80\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec80';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec82\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec82';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec93\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec93';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec9c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec9c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ec9d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ec9d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eca0\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eca0';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eca1\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eca1';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eca2\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eca2';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eca5\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eca5';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecb0\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecb0';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecb3\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecb3';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecba\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecba';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecbc\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecbc';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecbd\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecbd';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecc0\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecc0';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecce\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecce';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecd2\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecd2';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecd3\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecd3';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecd4\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecd4';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecdc\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecdc';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecdd\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecdd';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ece5\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ece5';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eceb\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eceb';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecec\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecec';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecef\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecef';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecf9\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecf9';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecfa\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecfa';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ecfb\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ecfb';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed04\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed04';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed0d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed0d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed16\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed16';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed17\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed17';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed1a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed1a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed1b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed1b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed28\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed28';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed35\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed35';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed36\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed36';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed37\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed37';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed3b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed3b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed3e\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed3e';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed43\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed43';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed44\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed44';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed4b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed4b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed4f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed4f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed53\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed53';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed54\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed54';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed55\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed55';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed58\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed58';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed59\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed59';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed5d\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed5d';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed60\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed60';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed62\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed62';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed63\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed63';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed65\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed65';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed6f\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed6f';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed70\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed70';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed80\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed80';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed81\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed81';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed82\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed82';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed8b\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed8b';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed8c\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed8c';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed94\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed94';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed99\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed99';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\ed9a\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\ed9a';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\eda9\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\eda9';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\edac\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\edac';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\edad\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\edad';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\edb2\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\edb2';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\edb3\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\edb3';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\edb5\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\edb5';
+      content: var(--tw-content);
+    }
+  }
+  .after\:invisible {
+    &::after {
+      content: var(--tw-content);
+      visibility: hidden;
+    }
+  }
+  .after\:absolute {
+    &::after {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .after\:inset-0 {
+    &::after {
+      content: var(--tw-content);
+      inset: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:inset-x-0 {
+    &::after {
+      content: var(--tw-content);
+      inset-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:top-0 {
+    &::after {
+      content: var(--tw-content);
+      top: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:top-4 {
+    &::after {
+      content: var(--tw-content);
+      top: calc(var(--spacing) * 4);
+    }
+  }
+  .after\:top-6 {
+    &::after {
+      content: var(--tw-content);
+      top: calc(var(--spacing) * 6);
+    }
+  }
+  .after\:top-\[-4rem\] {
+    &::after {
+      content: var(--tw-content);
+      top: -4rem;
+    }
+  }
+  .after\:top-\[52\%\] {
+    &::after {
+      content: var(--tw-content);
+      top: 52%;
+    }
+  }
+  .after\:right-0 {
+    &::after {
+      content: var(--tw-content);
+      right: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:bottom-0 {
+    &::after {
+      content: var(--tw-content);
+      bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:bottom-\[-0\.1em\] {
+    &::after {
+      content: var(--tw-content);
+      bottom: -0.1em;
+    }
+  }
+  .after\:bottom-\[-4rem\] {
+    &::after {
+      content: var(--tw-content);
+      bottom: -4rem;
+    }
+  }
+  .after\:bottom-\[4\%\] {
+    &::after {
+      content: var(--tw-content);
+      bottom: 4%;
+    }
+  }
+  .after\:bottom-\[9\%\] {
+    &::after {
+      content: var(--tw-content);
+      bottom: 9%;
+    }
+  }
+  .after\:left-0 {
+    &::after {
+      content: var(--tw-content);
+      left: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:left-1 {
+    &::after {
+      content: var(--tw-content);
+      left: calc(var(--spacing) * 1);
+    }
+  }
+  .after\:left-2\/4 {
+    &::after {
+      content: var(--tw-content);
+      left: calc(2/4 * 100%);
+    }
+  }
+  .after\:left-\[-1\.5\%\] {
+    &::after {
+      content: var(--tw-content);
+      left: -1.5%;
+    }
+  }
+  .after\:left-\[3rem\] {
+    &::after {
+      content: var(--tw-content);
+      left: 3rem;
+    }
+  }
+  .after\:z-0 {
+    &::after {
+      content: var(--tw-content);
+      z-index: 0;
+    }
+  }
+  .after\:z-\[-1\] {
+    &::after {
+      content: var(--tw-content);
+      z-index: -1;
+    }
+  }
+  .after\:z-\[1\] {
+    &::after {
+      content: var(--tw-content);
+      z-index: 1;
+    }
+  }
+  .after\:clear-both {
+    &::after {
+      content: var(--tw-content);
+      clear: both;
+    }
+  }
+  .after\:\!mt-0 {
+    &::after {
+      content: var(--tw-content);
+      margin-top: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .after\:mr-\[-0\.25rem\] {
+    &::after {
+      content: var(--tw-content);
+      margin-right: -0.25rem;
+    }
+  }
+  .after\:block {
+    &::after {
+      content: var(--tw-content);
+      display: block;
+    }
+  }
+  .after\:inline-block {
+    &::after {
+      content: var(--tw-content);
+      display: inline-block;
+    }
+  }
+  .after\:h-0 {
+    &::after {
+      content: var(--tw-content);
+      height: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:h-\[0\.3em\] {
+    &::after {
+      content: var(--tw-content);
+      height: 0.3em;
+    }
+  }
+  .after\:h-\[2\.3rem\] {
+    &::after {
+      content: var(--tw-content);
+      height: 2.3rem;
+    }
+  }
+  .after\:h-\[10\%\] {
+    &::after {
+      content: var(--tw-content);
+      height: 10%;
+    }
+  }
+  .after\:h-\[30\%\] {
+    &::after {
+      content: var(--tw-content);
+      height: 30%;
+    }
+  }
+  .after\:h-\[111\%\] {
+    &::after {
+      content: var(--tw-content);
+      height: 111%;
+    }
+  }
+  .after\:h-full {
+    &::after {
+      content: var(--tw-content);
+      height: 100%;
+    }
+  }
+  .after\:h-px {
+    &::after {
+      content: var(--tw-content);
+      height: 1px;
+    }
+  }
+  .after\:w-\[2\.3rem\] {
+    &::after {
+      content: var(--tw-content);
+      width: 2.3rem;
+    }
+  }
+  .after\:w-\[102\.5\%\] {
+    &::after {
+      content: var(--tw-content);
+      width: 102.5%;
+    }
+  }
+  .after\:w-\[107\%\] {
+    &::after {
+      content: var(--tw-content);
+      width: 107%;
+    }
+  }
+  .after\:w-\[110\%\] {
+    &::after {
+      content: var(--tw-content);
+      width: 110%;
+    }
+  }
+  .after\:w-full {
+    &::after {
+      content: var(--tw-content);
+      width: 100%;
+    }
+  }
+  .after\:w-px {
+    &::after {
+      content: var(--tw-content);
+      width: 1px;
+    }
+  }
+  .after\:-translate-x-2\/4 {
+    &::after {
+      content: var(--tw-content);
+      --tw-translate-x: calc(calc(2/4 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .after\:-translate-y-2\/4 {
+    &::after {
+      content: var(--tw-content);
+      --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .after\:-rotate-2 {
+    &::after {
+      content: var(--tw-content);
+      rotate: calc(2deg * -1);
+    }
+  }
+  .after\:animate-\[ripple-2_2s_infinite_ease-in-out\] {
+    &::after {
+      content: var(--tw-content);
+      animation: ripple-2 2s infinite ease-in-out;
+    }
+  }
+  .after\:cursor-pointer {
+    &::after {
+      content: var(--tw-content);
+      cursor: pointer;
+    }
+  }
+  .after\:overflow-hidden {
+    &::after {
+      content: var(--tw-content);
+      overflow: hidden;
+    }
+  }
+  .after\:rounded-\[50\%\] {
+    &::after {
+      content: var(--tw-content);
+      border-radius: 50%;
+    }
+  }
+  .after\:rounded-\[5rem\] {
+    &::after {
+      content: var(--tw-content);
+      border-radius: 5rem;
+    }
+  }
+  .after\:rounded-\[80\%\] {
+    &::after {
+      content: var(--tw-content);
+      border-radius: 80%;
+    }
+  }
+  .after\:rounded-t-\[0\.4rem\] {
+    &::after {
+      content: var(--tw-content);
+      border-top-left-radius: 0.4rem;
+      border-top-right-radius: 0.4rem;
+    }
+  }
+  .after\:border-0 {
+    &::after {
+      content: var(--tw-content);
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .after\:border-\[3px\] {
+    &::after {
+      content: var(--tw-content);
+      border-style: var(--tw-border-style);
+      border-width: 3px;
+    }
+  }
+  .after\:\!border-t-\[calc\(0\.4rem_-_6px\)\] {
+    &::after {
+      content: var(--tw-content);
+      border-top-style: var(--tw-border-style) !important;
+      border-top-width: calc(0.4rem - 6px) !important;
+    }
+  }
+  .after\:border-t {
+    &::after {
+      content: var(--tw-content);
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+    }
+  }
+  .after\:border-t-\[4rem\] {
+    &::after {
+      content: var(--tw-content);
+      border-top-style: var(--tw-border-style);
+      border-top-width: 4rem;
+    }
+  }
+  .after\:border-t-\[6px\] {
+    &::after {
+      content: var(--tw-content);
+      border-top-style: var(--tw-border-style);
+      border-top-width: 6px;
+    }
+  }
+  .after\:\!border-r-\[calc\(0\.4rem_-_6px\)\] {
+    &::after {
+      content: var(--tw-content);
+      border-right-style: var(--tw-border-style) !important;
+      border-right-width: calc(0.4rem - 6px) !important;
+    }
+  }
+  .after\:border-r-\[100vw\] {
+    &::after {
+      content: var(--tw-content);
+      border-right-style: var(--tw-border-style);
+      border-right-width: 100vw;
+    }
+  }
+  .after\:\!border-b-\[6px\] {
+    &::after {
+      content: var(--tw-content);
+      border-bottom-style: var(--tw-border-style) !important;
+      border-bottom-width: 6px !important;
+    }
+  }
+  .after\:border-b-0 {
+    &::after {
+      content: var(--tw-content);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
+  .after\:border-b-\[4rem\] {
+    &::after {
+      content: var(--tw-content);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 4rem;
+    }
+  }
+  .after\:border-b-\[calc\(0\.4rem_-_6px\)\] {
+    &::after {
+      content: var(--tw-content);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: calc(0.4rem - 6px);
+    }
+  }
+  .after\:\!border-l-\[6px\] {
+    &::after {
+      content: var(--tw-content);
+      border-left-style: var(--tw-border-style) !important;
+      border-left-width: 6px !important;
+    }
+  }
+  .after\:border-l-0 {
+    &::after {
+      content: var(--tw-content);
+      border-left-style: var(--tw-border-style);
+      border-left-width: 0px;
+    }
+  }
+  .after\:border-l-\[100vw\] {
+    &::after {
+      content: var(--tw-content);
+      border-left-style: var(--tw-border-style);
+      border-left-width: 100vw;
+    }
+  }
+  .after\:border-solid {
+    &::after {
+      content: var(--tw-content);
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .after\:border-\[\#3f78e0\] {
+    &::after {
+      content: var(--tw-content);
+      border-color: #3f78e0;
+    }
+  }
+  .after\:border-\[\#262b32\] {
+    &::after {
+      content: var(--tw-content);
+      border-color: #262b32;
+    }
+  }
+  .after\:border-\[\#e2626b\] {
+    &::after {
+      content: var(--tw-content);
+      border-color: #e2626b;
+    }
+  }
+  .after\:border-\[\#fefefe\] {
+    &::after {
+      content: var(--tw-content);
+      border-color: #fefefe;
+    }
+  }
+  .after\:\!border-y-transparent {
+    &::after {
+      content: var(--tw-content);
+      border-block-color: transparent !important;
+    }
+  }
+  .after\:border-y-transparent {
+    &::after {
+      content: var(--tw-content);
+      border-block-color: transparent;
+    }
+  }
+  .after\:border-t-\[rgba\(164\,174\,198\,0\.2\)\] {
+    &::after {
+      content: var(--tw-content);
+      border-top-color: rgba(164,174,198,0.2);
+    }
+  }
+  .after\:border-t-inherit {
+    &::after {
+      content: var(--tw-content);
+      border-top-color: inherit;
+    }
+  }
+  .after\:border-r-transparent {
+    &::after {
+      content: var(--tw-content);
+      border-right-color: transparent;
+    }
+  }
+  .after\:border-b-transparent {
+    &::after {
+      content: var(--tw-content);
+      border-bottom-color: transparent;
+    }
+  }
+  .after\:border-l-transparent {
+    &::after {
+      content: var(--tw-content);
+      border-left-color: transparent;
+    }
+  }
+  .after\:\!bg-\[\#54a8c7\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: #54a8c7 !important;
+    }
+  }
+  .after\:\!bg-\[\#747ed1\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: #747ed1 !important;
+    }
+  }
+  .after\:\!bg-\[\#ffffff\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: #ffffff !important;
+    }
+  }
+  .after\:bg-\[\#3f78e0\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: #3f78e0;
+    }
+  }
+  .after\:bg-\[\#e0e9fa\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: #e0e9fa;
+    }
+  }
+  .after\:bg-\[\#e668b3\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: #e668b3;
+    }
+  }
+  .after\:bg-\[\#fab758\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: #fab758;
+    }
+  }
+  .after\:bg-\[\#ffffff\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: #ffffff;
+    }
+  }
+  .after\:bg-\[rgba\(30\,34\,40\,\.4\)\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: rgba(30,34,40,.4);
+    }
+  }
+  .after\:bg-\[rgba\(63\,120\,224\,\.12\)\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: rgba(63,120,224,.12);
+    }
+  }
+  .after\:bg-\[rgba\(84\,168\,199\,\.12\)\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: rgba(84,168,199,.12);
+    }
+  }
+  .after\:bg-\[rgba\(116\,126\,209\,\.12\)\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: rgba(116,126,209,.12);
+    }
+  }
+  .after\:bg-\[rgba\(164\,174\,198\,\.2\)\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: rgba(164,174,198,.2);
+    }
+  }
+  .after\:bg-inherit {
+    &::after {
+      content: var(--tw-content);
+      background-color: inherit;
+    }
+  }
+  .after\:\!bg-\[linear-gradient\(40deg\,\#f5b161_\.4\%\,\#ec366e_100\.2\%\)\] {
+    &::after {
+      content: var(--tw-content);
+      background-image: linear-gradient(40deg,#f5b161 .4%,#ec366e 100.2%) !important;
+    }
+  }
+  .after\:\!bg-\[linear-gradient\(45deg\,\#08aeea_0\,\#2af598_100\%\)\] {
+    &::after {
+      content: var(--tw-content);
+      background-image: linear-gradient(45deg,#08aeea 0,#2af598 100%) !important;
+    }
+  }
+  .after\:\!bg-\[linear-gradient\(120deg\,\#f857a6_10\%\,\#ef3f6e_100\%\)\] {
+    &::after {
+      content: var(--tw-content);
+      background-image: linear-gradient(120deg,#f857a6 10%,#ef3f6e 100%) !important;
+    }
+  }
+  .after\:\[background-size\:100\%_100\%\] {
+    &::after {
+      content: var(--tw-content);
+      background-size: 100% 100%;
+    }
+  }
+  .after\:bg-bottom {
+    &::after {
+      content: var(--tw-content);
+      background-position: bottom;
+    }
+  }
+  .after\:bg-no-repeat {
+    &::after {
+      content: var(--tw-content);
+      background-repeat: no-repeat;
+    }
+  }
+  .after\:\!pl-\[0\.05rem\] {
+    &::after {
+      content: var(--tw-content);
+      padding-left: 0.05rem !important;
+    }
+  }
+  .after\:text-center {
+    &::after {
+      content: var(--tw-content);
+      text-align: center;
+    }
+  }
+  .after\:align-\[-3px\] {
+    &::after {
+      content: var(--tw-content);
+      vertical-align: -3px;
+    }
+  }
+  .after\:font-Custom {
+    &::after {
+      content: var(--tw-content);
+      font-family: var(--font-Custom);
+    }
+  }
+  .after\:font-Unicons {
+    &::after {
+      content: var(--tw-content);
+      font-family: var(--font-Unicons);
+    }
+  }
+  .after\:text-\[0\.7rem\] {
+    &::after {
+      content: var(--tw-content);
+      font-size: 0.7rem;
+    }
+  }
+  .after\:text-\[0\.8rem\] {
+    &::after {
+      content: var(--tw-content);
+      font-size: 0.8rem;
+    }
+  }
+  .after\:text-\[0\.9rem\] {
+    &::after {
+      content: var(--tw-content);
+      font-size: 0.9rem;
+    }
+  }
+  .after\:text-\[1\.2rem\] {
+    &::after {
+      content: var(--tw-content);
+      font-size: 1.2rem;
+    }
+  }
+  .after\:leading-\[2\.3rem\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-leading: 2.3rem;
+      line-height: 2.3rem;
+    }
+  }
+  .after\:leading-none {
+    &::after {
+      content: var(--tw-content);
+      --tw-leading: 1;
+      line-height: 1;
+    }
+  }
+  .after\:font-normal {
+    &::after {
+      content: var(--tw-content);
+      --tw-font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-normal);
+    }
+  }
+  .after\:\!text-\[\#343f52\] {
+    &::after {
+      content: var(--tw-content);
+      color: #343f52 !important;
+    }
+  }
+  .after\:\!text-\[\#3f78e0\] {
+    &::after {
+      content: var(--tw-content);
+      color: #3f78e0 !important;
+    }
+  }
+  .after\:\!text-\[\#7cb798\] {
+    &::after {
+      content: var(--tw-content);
+      color: #7cb798 !important;
+    }
+  }
+  .after\:\!text-\[\#54a8c7\] {
+    &::after {
+      content: var(--tw-content);
+      color: #54a8c7 !important;
+    }
+  }
+  .after\:\!text-\[\#e31e24\] {
+    &::after {
+      content: var(--tw-content);
+      color: #e31e24 !important;
+    }
+  }
+  .after\:\!text-\[\#747ed1\] {
+    &::after {
+      content: var(--tw-content);
+      color: #747ed1 !important;
+    }
+  }
+  .after\:\!text-\[\#a07cc5\] {
+    &::after {
+      content: var(--tw-content);
+      color: #a07cc5 !important;
+    }
+  }
+  .after\:\!text-\[\#d16b86\] {
+    &::after {
+      content: var(--tw-content);
+      color: #d16b86 !important;
+    }
+  }
+  .after\:\!text-\[\#f78b77\] {
+    &::after {
+      content: var(--tw-content);
+      color: #f78b77 !important;
+    }
+  }
+  .after\:\!text-\[\#fab758\] {
+    &::after {
+      content: var(--tw-content);
+      color: #fab758 !important;
+    }
+  }
+  .after\:\!text-\[\#fcc032\] {
+    &::after {
+      content: var(--tw-content);
+      color: #fcc032 !important;
+    }
+  }
+  .after\:\!text-white {
+    &::after {
+      content: var(--tw-content);
+      color: var(--color-white) !important;
+    }
+  }
+  .after\:not-italic {
+    &::after {
+      content: var(--tw-content);
+      font-style: normal;
+    }
+  }
+  .after\:opacity-60 {
+    &::after {
+      content: var(--tw-content);
+      opacity: 60%;
+    }
+  }
+  .after\:opacity-100 {
+    &::after {
+      content: var(--tw-content);
+      opacity: 100%;
+    }
+  }
+  .after\:transition-all {
+    &::after {
+      content: var(--tw-content);
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .after\:duration-\[0\.2s\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-duration: 0.2s;
+      transition-duration: 0.2s;
+    }
+  }
+  .after\:ease-\[ease-in-out\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-ease: ease-in-out;
+      transition-timing-function: ease-in-out;
+    }
+  }
+  .after\:ease-in-out {
+    &::after {
+      content: var(--tw-content);
+      --tw-ease: var(--ease-in-out);
+      transition-timing-function: var(--ease-in-out);
+    }
+  }
+  .after\:ease-linear {
+    &::after {
+      content: var(--tw-content);
+      --tw-ease: linear;
+      transition-timing-function: linear;
+    }
+  }
+  .after\:content-\[\'\'\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
+  .after\:content-\[\'\\2605\\2605\\2605\\2605\\2605\'\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '\2605\2605\2605\2605\2605';
+      content: var(--tw-content);
+    }
+  }
+  .after\:content-\[\'\\e94c\'\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '\e94c';
+      content: var(--tw-content);
+    }
+  }
+  .after\:content-\[\'\\e906\'\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '\e906';
+      content: var(--tw-content);
+    }
+  }
+  .after\:content-\[\'\\e951\'\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '\e951';
+      content: var(--tw-content);
+    }
+  }
+  .after\:\[animation-delay\:\.5s\] {
+    &::after {
+      content: var(--tw-content);
+      animation-delay: .5s;
+    }
+  }
+  .after\:\[animation-delay\:0\.5s\] {
+    &::after {
+      content: var(--tw-content);
+      animation-delay: 0.5s;
+    }
+  }
+  .hover\:translate-y-0 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-translate-y: calc(var(--spacing) * 0);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .hover\:translate-y-\[-0\.15rem\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-translate-y: -0.15rem;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .hover\:\!translate-none {
+    &:hover {
+      @media (hover: hover) {
+        translate: none !important;
+      }
+    }
+  }
+  .hover\:\!transform-none {
+    &:hover {
+      @media (hover: hover) {
+        transform: none !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#5eb9f0\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #5eb9f0 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#343f52\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #343f52 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#3f78e0\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #3f78e0 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#45c4a0\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #45c4a0 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#54a8c7\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #54a8c7 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#e31e24\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #e31e24 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#747ed1\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #747ed1 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#7cb798\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #7cb798 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#9499a3\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #9499a3 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#a07cc5\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #a07cc5 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#d16b86\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #d16b86 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#e668b3\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #e668b3 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#e2626b\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #e2626b !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#f78b77\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #f78b77 !important;
+      }
+    }
+  }
+  .hover\:\!border-\[\#fab758\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #fab758 !important;
+      }
+    }
+  }
+  .hover\:border-white {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-white);
+      }
+    }
+  }
+  .hover\:\!bg-\[\#54a8c7\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #54a8c7 !important;
+      }
+    }
+  }
+  .hover\:\!bg-\[\#5eb9f0\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #5eb9f0 !important;
+      }
+    }
+  }
+  .hover\:\!bg-\[\#343f52\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #343f52 !important;
+      }
+    }
+  }
+  .hover\:\!bg-\[\#e31e24\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #e31e24 !important;
+      }
+    }
+  }
+  .hover\:\!bg-\[\#747ed1\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #747ed1 !important;
+      }
+    }
+  }
+  .hover\:\!bg-\[\#a07cc5\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #a07cc5 !important;
+      }
+    }
+  }
+  .hover\:\!bg-\[\#d16b86\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #d16b86 !important;
+      }
+    }
+  }
+  .hover\:bg-\[\#7cb798\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #7cb798;
+      }
+    }
+  }
+  .hover\:bg-\[\#343f52\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #343f52;
+      }
+    }
+  }
+  .hover\:bg-\[\#3f78e0\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #3f78e0;
+      }
+    }
+  }
+  .hover\:bg-\[\#45c4a0\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #45c4a0;
+      }
+    }
+  }
+  .hover\:bg-\[\#54a8c7\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #54a8c7;
+      }
+    }
+  }
+  .hover\:bg-\[\#e31e24\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #e31e24;
+      }
+    }
+  }
+  .hover\:bg-\[\#747ed1\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #747ed1;
+      }
+    }
+  }
+  .hover\:bg-\[\#9499a3\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #9499a3;
+      }
+    }
+  }
+  .hover\:bg-\[\#a07cc5\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #a07cc5;
+      }
+    }
+  }
+  .hover\:bg-\[\#d16b86\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #d16b86;
+      }
+    }
+  }
+  .hover\:bg-\[\#e668b3\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #e668b3;
+      }
+    }
+  }
+  .hover\:bg-\[\#e2626b\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #e2626b;
+      }
+    }
+  }
+  .hover\:bg-\[\#f78b77\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #f78b77;
+      }
+    }
+  }
+  .hover\:bg-\[\#fab758\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #fab758;
+      }
+    }
+  }
+  .hover\:bg-\[\#ffffff\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #ffffff;
+      }
+    }
+  }
+  .hover\:bg-\[inherit\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: inherit;
+      }
+    }
+  }
+  .hover\:bg-\[rgba\(38\,43\,50\,\.9\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: rgba(38,43,50,.9);
+      }
+    }
+  }
+  .hover\:bg-\[rgba\(255\,255\,255\,\.9\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: rgba(255,255,255,.9);
+      }
+    }
+  }
+  .hover\:\!text-\[\#1b1e23\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #1b1e23 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#2c549d\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #2c549d !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#5eb9f0\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #5eb9f0 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#7cb798\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #7cb798 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#343f52\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #343f52 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#3b768b\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #3b768b !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#3f78e0\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #3f78e0 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#45c4a0\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #45c4a0 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#54a8c7\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #54a8c7 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#e31e24\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #e31e24 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#747ed1\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #747ed1 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#60697b\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #60697b !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#a07cc5\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #a07cc5 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#b2b2b2\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #b2b2b2 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#d16b86\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #d16b86 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#e668b3\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #e668b3 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#e2626b\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #e2626b !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#f78b77\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #f78b77 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#fab758\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #fab758 !important;
+      }
+    }
+  }
+  .hover\:\!text-\[\#ffffffb3\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #ffffffb3 !important;
+      }
+    }
+  }
+  .hover\:\!text-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white) !important;
+      }
+    }
+  }
+  .hover\:text-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
+  .hover\:no-underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: none;
+      }
+    }
+  }
+  .hover\:\!shadow-\[0_0\.25rem_1\.75rem_rgba\(30\,34\,40\,0\.07\)\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 0.25rem 1.75rem var(--tw-shadow-color, rgba(30,34,40,0.07)) !important;
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+      }
+    }
+  }
+  .hover\:shadow-\[0_0\.25rem_0\.75rem_rgba\(30\,34\,40\,\.05\)\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,.05));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\:shadow-\[0_0\.25rem_0\.75rem_rgba\(30\,34\,40\,0\.05\)\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.05));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\:shadow-\[0_0\.25rem_0\.75rem_rgba\(30\,34\,40\,0\.15\)\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.15));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\:before\:h-\[calc\(100\%_\+_3px\)\] {
+    &:hover {
+      @media (hover: hover) {
+        &::before {
+          content: var(--tw-content);
+          height: calc(100% + 3px);
+        }
+      }
+    }
+  }
+  .hover\:before\:origin-\[0_50\%\] {
+    &:hover {
+      @media (hover: hover) {
+        &::before {
+          content: var(--tw-content);
+          transform-origin: 0 50%;
+        }
+      }
+    }
+  }
+  .hover\:before\:bg-\[rgba\(0\,0\,0\,\.11\)\] {
+    &:hover {
+      @media (hover: hover) {
+        &::before {
+          content: var(--tw-content);
+          background-color: rgba(0,0,0,.11);
+        }
+      }
+    }
+  }
+  .hover\:before\:ease-\[cubic-bezier\(\.4\,1\,0\.8\,1\)\] {
+    &:hover {
+      @media (hover: hover) {
+        &::before {
+          content: var(--tw-content);
+          --tw-ease: cubic-bezier(.4,1,0.8,1);
+          transition-timing-function: cubic-bezier(.4,1,0.8,1);
+        }
+      }
+    }
+  }
+  .hover\:after\:\!text-\[\#3f78e0\] {
+    &:hover {
+      @media (hover: hover) {
+        &::after {
+          content: var(--tw-content);
+          color: #3f78e0 !important;
+        }
+      }
+    }
+  }
+  .focus\:z-\[5\] {
+    &:focus {
+      z-index: 5;
+    }
+  }
+  .focus\:\!border-0 {
+    &:focus {
+      border-style: var(--tw-border-style) !important;
+      border-width: 0px !important;
+    }
+  }
+  .focus\:\!border-\[\#9fbcf0\] {
+    &:focus {
+      border-color: #9fbcf0 !important;
+    }
+  }
+  .focus\:\!border-\[\#747ed1\] {
+    &:focus {
+      border-color: #747ed1 !important;
+    }
+  }
+  .focus\:\!border-\[\#a07cc5\] {
+    &:focus {
+      border-color: #a07cc5 !important;
+    }
+  }
+  .focus\:\!border-\[rgba\(63\,120\,224\,\.5\)\] {
+    &:focus {
+      border-color: rgba(63,120,224,.5) !important;
+    }
+  }
+  .focus\:\!border-\[rgba\(84\,168\,199\,\.5\)\] {
+    &:focus {
+      border-color: rgba(84,168,199,.5) !important;
+    }
+  }
+  .focus\:\!border-\[rgba\(116\,126\,209\,\.5\)\] {
+    &:focus {
+      border-color: rgba(116,126,209,.5) !important;
+    }
+  }
+  .focus\:\!border-\[rgba\(247\,139\,119\,\.5\)\] {
+    &:focus {
+      border-color: rgba(247,139,119,.5) !important;
+    }
+  }
+  .focus\:\!border-\[rgba\(250\,183\,88\,\.5\)\] {
+    &:focus {
+      border-color: rgba(250,183,88,.5) !important;
+    }
+  }
+  .focus\:bg-\[\#fefefe\] {
+    &:focus {
+      background-color: #fefefe;
+    }
+  }
+  .focus\:bg-\[\#ffffff\] {
+    &:focus {
+      background-color: #ffffff;
+    }
+  }
+  .focus\:bg-\[rgba\(255\,255\,255\,\.7\)\] {
+    &:focus {
+      background-color: rgba(255,255,255,.7);
+    }
+  }
+  .focus\:\!text-\[\#7cb798\] {
+    &:focus {
+      color: #7cb798 !important;
+    }
+  }
+  .focus\:\!text-\[\#45c4a0\] {
+    &:focus {
+      color: #45c4a0 !important;
+    }
+  }
+  .focus\:\!text-\[\#54a8c7\] {
+    &:focus {
+      color: #54a8c7 !important;
+    }
+  }
+  .focus\:\!text-\[\#5eb9f0\] {
+    &:focus {
+      color: #5eb9f0 !important;
+    }
+  }
+  .focus\:\!text-\[\#343f52\] {
+    &:focus {
+      color: #343f52 !important;
+    }
+  }
+  .focus\:\!text-\[\#e31e24\] {
+    &:focus {
+      color: #e31e24 !important;
+    }
+  }
+  .focus\:\!text-\[\#747ed1\] {
+    &:focus {
+      color: #747ed1 !important;
+    }
+  }
+  .focus\:\!text-\[\#a07cc5\] {
+    &:focus {
+      color: #a07cc5 !important;
+    }
+  }
+  .focus\:\!text-\[\#d16b86\] {
+    &:focus {
+      color: #d16b86 !important;
+    }
+  }
+  .focus\:\!text-\[\#e668b3\] {
+    &:focus {
+      color: #e668b3 !important;
+    }
+  }
+  .focus\:\!text-\[\#e2626b\] {
+    &:focus {
+      color: #e2626b !important;
+    }
+  }
+  .focus\:\!text-\[\#f78b77\] {
+    &:focus {
+      color: #f78b77 !important;
+    }
+  }
+  .focus\:\!text-\[\#fab758\] {
+    &:focus {
+      color: #fab758 !important;
+    }
+  }
+  .focus\:\!text-white {
+    &:focus {
+      color: var(--color-white) !important;
+    }
+  }
+  .focus\:text-white {
+    &:focus {
+      color: var(--color-white);
+    }
+  }
+  .focus\:shadow-\[0_0_1\.25rem_rgba\(30\,34\,40\,0\.04\)\,unset\] {
+    &:focus {
+      --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04)), unset;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus\:shadow-\[rgba\(79\,152\,181\,1\)\] {
+    &:focus {
+      --tw-shadow-color: rgba(79,152,181,1);
+    }
+  }
+  .focus\:shadow-\[rgba\(82\,92\,108\,1\)\] {
+    &:focus {
+      --tw-shadow-color: rgba(82,92,108,1);
+    }
+  }
+  .focus\:shadow-\[rgba\(88\,167\,216\,1\)\] {
+    &:focus {
+      --tw-shadow-color: rgba(88,167,216,1);
+    }
+  }
+  .focus\:shadow-\[rgba\(96\,93\,186\,1\)\] {
+    &:focus {
+      --tw-shadow-color: rgba(96,93,186,1);
+    }
+  }
+  .focus\:shadow-\[rgba\(113\,165\,142\,1\)\] {
+    &:focus {
+      --tw-shadow-color: rgba(113,165,142,1);
+    }
+  }
+  .focus\:shadow-\[rgba\(116\,126\,209\,1\)\] {
+    &:focus {
+      --tw-shadow-color: rgba(116,126,209,1);
+    }
+  }
+  .focus\:shadow-\[rgba\(134\,140\,151\,1\)\] {
+    &:focus {
+      --tw-shadow-color: rgba(134,140,151,1);
+    }
+  }
+  .focus\:shadow-\[rgba\(255\,255\,255\,1\)\] {
+    &:focus {
+      --tw-shadow-color: rgba(255,255,255,1);
+    }
+  }
+  .focus\:\!outline-offset-0 {
+    &:focus {
+      outline-offset: 0px !important;
+    }
+  }
+  .focus-visible\:\!border-0 {
+    &:focus-visible {
+      border-style: var(--tw-border-style) !important;
+      border-width: 0px !important;
+    }
+  }
+  .focus-visible\:\!border-\[\#9fbcf0\] {
+    &:focus-visible {
+      border-color: #9fbcf0 !important;
+    }
+  }
+  .focus-visible\:\!border-\[\#747ed1\] {
+    &:focus-visible {
+      border-color: #747ed1 !important;
+    }
+  }
+  .focus-visible\:\!border-\[\#a07cc5\] {
+    &:focus-visible {
+      border-color: #a07cc5 !important;
+    }
+  }
+  .focus-visible\:\!border-\[rgba\(63\,120\,224\,\.5\)\] {
+    &:focus-visible {
+      border-color: rgba(63,120,224,.5) !important;
+    }
+  }
+  .focus-visible\:\!border-\[rgba\(63\,120\,224\,0\.5\)\] {
+    &:focus-visible {
+      border-color: rgba(63,120,224,0.5) !important;
+    }
+  }
+  .focus-visible\:\!border-\[rgba\(84\,168\,199\,\.5\)\] {
+    &:focus-visible {
+      border-color: rgba(84,168,199,.5) !important;
+    }
+  }
+  .focus-visible\:\!border-\[rgba\(116\,126\,209\,\.5\)\] {
+    &:focus-visible {
+      border-color: rgba(116,126,209,.5) !important;
+    }
+  }
+  .focus-visible\:\!border-\[rgba\(247\,139\,119\,\.5\)\] {
+    &:focus-visible {
+      border-color: rgba(247,139,119,.5) !important;
+    }
+  }
+  .focus-visible\:\!border-\[rgba\(250\,183\,88\,\.5\)\] {
+    &:focus-visible {
+      border-color: rgba(250,183,88,.5) !important;
+    }
+  }
+  .active\:border-\[\#5eb9f0\] {
+    &:active {
+      border-color: #5eb9f0;
+    }
+  }
+  .active\:border-\[\#7cb798\] {
+    &:active {
+      border-color: #7cb798;
+    }
+  }
+  .active\:border-\[\#343f52\] {
+    &:active {
+      border-color: #343f52;
+    }
+  }
+  .active\:border-\[\#3f78e0\] {
+    &:active {
+      border-color: #3f78e0;
+    }
+  }
+  .active\:border-\[\#45c4a0\] {
+    &:active {
+      border-color: #45c4a0;
+    }
+  }
+  .active\:border-\[\#54a8c7\] {
+    &:active {
+      border-color: #54a8c7;
+    }
+  }
+  .active\:border-\[\#e31e24\] {
+    &:active {
+      border-color: #e31e24;
+    }
+  }
+  .active\:border-\[\#747ed1\] {
+    &:active {
+      border-color: #747ed1;
+    }
+  }
+  .active\:border-\[\#9499a3\] {
+    &:active {
+      border-color: #9499a3;
+    }
+  }
+  .active\:border-\[\#a07cc5\] {
+    &:active {
+      border-color: #a07cc5;
+    }
+  }
+  .active\:border-\[\#d16b86\] {
+    &:active {
+      border-color: #d16b86;
+    }
+  }
+  .active\:border-\[\#e668b3\] {
+    &:active {
+      border-color: #e668b3;
+    }
+  }
+  .active\:border-\[\#e2626b\] {
+    &:active {
+      border-color: #e2626b;
+    }
+  }
+  .active\:border-\[\#f78b77\] {
+    &:active {
+      border-color: #f78b77;
+    }
+  }
+  .active\:border-\[\#fab758\] {
+    &:active {
+      border-color: #fab758;
+    }
+  }
+  .active\:border-white {
+    &:active {
+      border-color: var(--color-white);
+    }
+  }
+  .active\:\!bg-\[\#5eb9f0\] {
+    &:active {
+      background-color: #5eb9f0 !important;
+    }
+  }
+  .active\:bg-\[\#7cb798\] {
+    &:active {
+      background-color: #7cb798;
+    }
+  }
+  .active\:bg-\[\#343f52\] {
+    &:active {
+      background-color: #343f52;
+    }
+  }
+  .active\:bg-\[\#3f78e0\] {
+    &:active {
+      background-color: #3f78e0;
+    }
+  }
+  .active\:bg-\[\#45c4a0\] {
+    &:active {
+      background-color: #45c4a0;
+    }
+  }
+  .active\:bg-\[\#54a8c7\] {
+    &:active {
+      background-color: #54a8c7;
+    }
+  }
+  .active\:bg-\[\#e31e24\] {
+    &:active {
+      background-color: #e31e24;
+    }
+  }
+  .active\:bg-\[\#747ed1\] {
+    &:active {
+      background-color: #747ed1;
+    }
+  }
+  .active\:bg-\[\#9499a3\] {
+    &:active {
+      background-color: #9499a3;
+    }
+  }
+  .active\:bg-\[\#a07cc5\] {
+    &:active {
+      background-color: #a07cc5;
+    }
+  }
+  .active\:bg-\[\#d16b86\] {
+    &:active {
+      background-color: #d16b86;
+    }
+  }
+  .active\:bg-\[\#e668b3\] {
+    &:active {
+      background-color: #e668b3;
+    }
+  }
+  .active\:bg-\[\#e2626b\] {
+    &:active {
+      background-color: #e2626b;
+    }
+  }
+  .active\:bg-\[\#f78b77\] {
+    &:active {
+      background-color: #f78b77;
+    }
+  }
+  .active\:bg-\[\#fab758\] {
+    &:active {
+      background-color: #fab758;
+    }
+  }
+  .active\:bg-\[\#ffffff\] {
+    &:active {
+      background-color: #ffffff;
+    }
+  }
+  .active\:\!text-\[\#343f52\] {
+    &:active {
+      color: #343f52 !important;
+    }
+  }
+  .active\:\!text-white {
+    &:active {
+      color: var(--color-white) !important;
+    }
+  }
+  .active\:text-white {
+    &:active {
+      color: var(--color-white);
+    }
+  }
+  .disabled\:border-\[\#343f52\] {
+    &:disabled {
+      border-color: #343f52;
+    }
+  }
+  .disabled\:border-\[\#3f78e0\] {
+    &:disabled {
+      border-color: #3f78e0;
+    }
+  }
+  .disabled\:border-\[\#45c4a0\] {
+    &:disabled {
+      border-color: #45c4a0;
+    }
+  }
+  .disabled\:border-\[\#54a8c7\] {
+    &:disabled {
+      border-color: #54a8c7;
+    }
+  }
+  .disabled\:border-\[\#5eb9f0\] {
+    &:disabled {
+      border-color: #5eb9f0;
+    }
+  }
+  .disabled\:border-\[\#e31e24\] {
+    &:disabled {
+      border-color: #e31e24;
+    }
+  }
+  .disabled\:border-\[\#747ed1\] {
+    &:disabled {
+      border-color: #747ed1;
+    }
+  }
+  .disabled\:border-\[\#7cb798\] {
+    &:disabled {
+      border-color: #7cb798;
+    }
+  }
+  .disabled\:border-\[\#9499a3\] {
+    &:disabled {
+      border-color: #9499a3;
+    }
+  }
+  .disabled\:border-\[\#a07cc5\] {
+    &:disabled {
+      border-color: #a07cc5;
+    }
+  }
+  .disabled\:border-\[\#d16b86\] {
+    &:disabled {
+      border-color: #d16b86;
+    }
+  }
+  .disabled\:border-\[\#e668b3\] {
+    &:disabled {
+      border-color: #e668b3;
+    }
+  }
+  .disabled\:border-\[\#e2626b\] {
+    &:disabled {
+      border-color: #e2626b;
+    }
+  }
+  .disabled\:border-\[\#f78b77\] {
+    &:disabled {
+      border-color: #f78b77;
+    }
+  }
+  .disabled\:border-\[\#fab758\] {
+    &:disabled {
+      border-color: #fab758;
+    }
+  }
+  .disabled\:border-white {
+    &:disabled {
+      border-color: var(--color-white);
+    }
+  }
+  .disabled\:\!bg-\[\#5eb9f0\] {
+    &:disabled {
+      background-color: #5eb9f0 !important;
+    }
+  }
+  .disabled\:bg-\[\#7cb798\] {
+    &:disabled {
+      background-color: #7cb798;
+    }
+  }
+  .disabled\:bg-\[\#45c4a0\] {
+    &:disabled {
+      background-color: #45c4a0;
+    }
+  }
+  .disabled\:bg-\[\#54a8c7\] {
+    &:disabled {
+      background-color: #54a8c7;
+    }
+  }
+  .disabled\:bg-\[\#343f52\] {
+    &:disabled {
+      background-color: #343f52;
+    }
+  }
+  .disabled\:bg-\[\#3f78e0\] {
+    &:disabled {
+      background-color: #3f78e0;
+    }
+  }
+  .disabled\:bg-\[\#e31e24\] {
+    &:disabled {
+      background-color: #e31e24;
+    }
+  }
+  .disabled\:bg-\[\#747ed1\] {
+    &:disabled {
+      background-color: #747ed1;
+    }
+  }
+  .disabled\:bg-\[\#9499a3\] {
+    &:disabled {
+      background-color: #9499a3;
+    }
+  }
+  .disabled\:bg-\[\#a07cc5\] {
+    &:disabled {
+      background-color: #a07cc5;
+    }
+  }
+  .disabled\:bg-\[\#aab0bc\] {
+    &:disabled {
+      background-color: #aab0bc;
+    }
+  }
+  .disabled\:bg-\[\#d16b86\] {
+    &:disabled {
+      background-color: #d16b86;
+    }
+  }
+  .disabled\:bg-\[\#e668b3\] {
+    &:disabled {
+      background-color: #e668b3;
+    }
+  }
+  .disabled\:bg-\[\#e2626b\] {
+    &:disabled {
+      background-color: #e2626b;
+    }
+  }
+  .disabled\:bg-\[\#f78b77\] {
+    &:disabled {
+      background-color: #f78b77;
+    }
+  }
+  .disabled\:bg-\[\#fab758\] {
+    &:disabled {
+      background-color: #fab758;
+    }
+  }
+  .disabled\:bg-transparent {
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+  .disabled\:\!text-\[\#343f52\] {
+    &:disabled {
+      color: #343f52 !important;
+    }
+  }
+  .disabled\:\!text-\[\#747ed1\] {
+    &:disabled {
+      color: #747ed1 !important;
+    }
+  }
+  .disabled\:\!text-white {
+    &:disabled {
+      color: var(--color-white) !important;
+    }
+  }
+  .disabled\:text-white {
+    &:disabled {
+      color: var(--color-white);
+    }
+  }
+  .disabled\:opacity-100 {
+    &:disabled {
+      opacity: 100%;
+    }
+  }
+  .motion-reduce\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: none;
+    }
+  }
+  .motion-reduce\:file\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      &::file-selector-button {
+        transition-property: none;
+      }
+    }
+  }
+  .motion-reduce\:after\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      &::after {
+        content: var(--tw-content);
+        transition-property: none;
+      }
+    }
+  }
+  .max-xl\:\!text-\[calc\(1\.475rem_\+_2\.7vw\)\] {
+    @media (width < 1200px) {
+      font-size: calc(1.475rem + 2.7vw) !important;
+    }
+  }
+  .max-xl\:before\:\!hidden {
+    @media (width < 1200px) {
+      &::before {
+        content: var(--tw-content);
+        display: none !important;
+      }
+    }
+  }
+  .max-xl\:after\:\!hidden {
+    @media (width < 1200px) {
+      &::after {
+        content: var(--tw-content);
+        display: none !important;
+      }
+    }
+  }
+  .max-lg\:\!static {
+    @media (width < 992px) {
+      position: static !important;
+    }
+  }
+  .max-lg\:static {
+    @media (width < 992px) {
+      position: static;
+    }
+  }
+  .max-lg\:\!left-0 {
+    @media (width < 992px) {
+      left: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .max-lg\:m-\[0_auto\] {
+    @media (width < 992px) {
+      margin: 0 auto;
+    }
+  }
+  .max-lg\:\!mt-\[30px\] {
+    @media (width < 992px) {
+      margin-top: 30px !important;
+    }
+  }
+  .max-lg\:\!mt-\[40px\] {
+    @media (width < 992px) {
+      margin-top: 40px !important;
+    }
+  }
+  .max-lg\:\!mt-\[50px\] {
+    @media (width < 992px) {
+      margin-top: 50px !important;
+    }
+  }
+  .max-lg\:\!hidden {
+    @media (width < 992px) {
+      display: none !important;
+    }
+  }
+  .max-lg\:h-\[25rem\] {
+    @media (width < 992px) {
+      height: 25rem;
+    }
+  }
+  .max-lg\:w-6\/12 {
+    @media (width < 992px) {
+      width: calc(6/12 * 100%);
+    }
+  }
+  .max-lg\:\!text-\[1\.05rem\] {
+    @media (width < 992px) {
+      font-size: 1.05rem !important;
+    }
+  }
+  .max-lg\:before\:\!hidden {
+    @media (width < 992px) {
+      &::before {
+        content: var(--tw-content);
+        display: none !important;
+      }
+    }
+  }
+  .max-lg\:after\:\!hidden {
+    @media (width < 992px) {
+      &::after {
+        content: var(--tw-content);
+        display: none !important;
+      }
+    }
+  }
+  .max-md\:m-\[0_\.7rem_0_0\] {
+    @media (width < 768px) {
+      margin: 0 .7rem 0 0;
+    }
+  }
+  .max-md\:mx-\[-15px\] {
+    @media (width < 768px) {
+      margin-inline: -15px;
+    }
+  }
+  .max-md\:\!mt-\[15px\] {
+    @media (width < 768px) {
+      margin-top: 15px !important;
+    }
+  }
+  .max-md\:\!mt-\[30px\] {
+    @media (width < 768px) {
+      margin-top: 30px !important;
+    }
+  }
+  .max-md\:\!mt-\[40px\] {
+    @media (width < 768px) {
+      margin-top: 40px !important;
+    }
+  }
+  .max-md\:\!mt-\[50px\] {
+    @media (width < 768px) {
+      margin-top: 50px !important;
+    }
+  }
+  .max-md\:\!hidden {
+    @media (width < 768px) {
+      display: none !important;
+    }
+  }
+  .max-md\:min-h-\[20rem\] {
+    @media (width < 768px) {
+      min-height: 20rem;
+    }
+  }
+  .max-md\:min-h-\[25rem\] {
+    @media (width < 768px) {
+      min-height: 25rem;
+    }
+  }
+  .max-md\:w-full {
+    @media (width < 768px) {
+      width: 100%;
+    }
+  }
+  .max-md\:\!p-\[0\.9rem_2rem\] {
+    @media (width < 768px) {
+      padding: 0.9rem 2rem !important;
+    }
+  }
+  .max-md\:\!p-\[40px_40px_20px\] {
+    @media (width < 768px) {
+      padding: 40px 40px 20px !important;
+    }
+  }
+  .max-md\:\!px-\[15px\] {
+    @media (width < 768px) {
+      padding-inline: 15px !important;
+    }
+  }
+  .max-md\:pb-4 {
+    @media (width < 768px) {
+      padding-bottom: calc(var(--spacing) * 4);
+    }
+  }
+  .max-md\:\!text-\[1\.05rem\] {
+    @media (width < 768px) {
+      font-size: 1.05rem !important;
+    }
+  }
+  .max-md\:\!text-\[calc\(1\.255rem_\+_0\.06vw\)\] {
+    @media (width < 768px) {
+      font-size: calc(1.255rem + 0.06vw) !important;
+    }
+  }
+  .max-md\:before\:\!hidden {
+    @media (width < 768px) {
+      &::before {
+        content: var(--tw-content);
+        display: none !important;
+      }
+    }
+  }
+  .max-md\:after\:\!hidden {
+    @media (width < 768px) {
+      &::after {
+        content: var(--tw-content);
+        display: none !important;
+      }
+    }
+  }
+  .max-sm\:\!mt-\[-50px\] {
+    @media (width < 576px) {
+      margin-top: -50px !important;
+    }
+  }
+  .max-sm\:\!mt-\[50px\] {
+    @media (width < 576px) {
+      margin-top: 50px !important;
+    }
+  }
+  .max-sm\:\!hidden {
+    @media (width < 576px) {
+      display: none !important;
+    }
+  }
+  .max-sm\:w-full {
+    @media (width < 576px) {
+      width: 100%;
+    }
+  }
+  .max-sm\:\!bg-none {
+    @media (width < 576px) {
+      background-image: none !important;
+    }
+  }
+  .max-sm\:\!p-\[40px_40px_20px_40px\] {
+    @media (width < 576px) {
+      padding: 40px 40px 20px 40px !important;
+    }
+  }
+  .max-sm\:\!text-center {
+    @media (width < 576px) {
+      text-align: center !important;
+    }
+  }
+  .max-sm\:before\:\!hidden {
+    @media (width < 576px) {
+      &::before {
+        content: var(--tw-content);
+        display: none !important;
+      }
+    }
+  }
+  .max-sm\:after\:\!hidden {
+    @media (width < 576px) {
+      &::after {
+        content: var(--tw-content);
+        display: none !important;
+      }
+    }
+  }
+  .sm\:mx-\[-0\.5rem\] {
+    @media (width >= 576px) {
+      margin-inline: -0.5rem;
+    }
+  }
+  .sm\:\!mt-\[80px\] {
+    @media (width >= 576px) {
+      margin-top: 80px !important;
+    }
+  }
+  .sm\:\!mb-\[-10rem\] {
+    @media (width >= 576px) {
+      margin-bottom: -10rem !important;
+    }
+  }
+  .sm\:\!ml-\[-2\.5rem\] {
+    @media (width >= 576px) {
+      margin-left: -2.5rem !important;
+    }
+  }
+  .sm\:\!ml-\[-2rem\] {
+    @media (width >= 576px) {
+      margin-left: -2rem !important;
+    }
+  }
+  .sm\:w-6\/12 {
+    @media (width >= 576px) {
+      width: calc(6/12 * 100%);
+    }
+  }
+  .sm\:w-8\/12 {
+    @media (width >= 576px) {
+      width: calc(8/12 * 100%);
+    }
+  }
+  .sm\:w-9\/12 {
+    @media (width >= 576px) {
+      width: calc(9/12 * 100%);
+    }
+  }
+  .sm\:w-10\/12 {
+    @media (width >= 576px) {
+      width: calc(10/12 * 100%);
+    }
+  }
+  .sm\:\!p-\[40px\] {
+    @media (width >= 576px) {
+      padding: 40px !important;
+    }
+  }
+  .sm\:\!py-28 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .md\:relative {
+    @media (width >= 768px) {
+      position: relative;
+    }
+  }
+  .md\:z-\[3\] {
+    @media (width >= 768px) {
+      z-index: 3;
+    }
+  }
+  .md\:z-\[4\] {
+    @media (width >= 768px) {
+      z-index: 4;
+    }
+  }
+  .md\:\!order-2 {
+    @media (width >= 768px) {
+      order: 2 !important;
+    }
+  }
+  .md\:m-\[0_0_0_\.7rem\] {
+    @media (width >= 768px) {
+      margin: 0 0 0 .7rem;
+    }
+  }
+  .md\:m-\[0_0_0_0\.7rem\] {
+    @media (width >= 768px) {
+      margin: 0 0 0 0.7rem;
+    }
+  }
+  .md\:\!mx-5 {
+    @media (width >= 768px) {
+      margin-inline: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .md\:mx-0 {
+    @media (width >= 768px) {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:mx-1 {
+    @media (width >= 768px) {
+      margin-inline: calc(var(--spacing) * 1);
+    }
+  }
+  .md\:mx-5 {
+    @media (width >= 768px) {
+      margin-inline: calc(var(--spacing) * 5);
+    }
+  }
+  .md\:mx-6 {
+    @media (width >= 768px) {
+      margin-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .md\:mx-10 {
+    @media (width >= 768px) {
+      margin-inline: calc(var(--spacing) * 10);
+    }
+  }
+  .md\:mx-16 {
+    @media (width >= 768px) {
+      margin-inline: calc(var(--spacing) * 16);
+    }
+  }
+  .md\:mx-\[-1\.25rem\] {
+    @media (width >= 768px) {
+      margin-inline: -1.25rem;
+    }
+  }
+  .md\:mx-\[-12\.5px\] {
+    @media (width >= 768px) {
+      margin-inline: -12.5px;
+    }
+  }
+  .md\:mx-\[-15px\] {
+    @media (width >= 768px) {
+      margin-inline: -15px;
+    }
+  }
+  .md\:mx-\[-20px\] {
+    @media (width >= 768px) {
+      margin-inline: -20px;
+    }
+  }
+  .md\:mx-\[-22\.5px\] {
+    @media (width >= 768px) {
+      margin-inline: -22.5px;
+    }
+  }
+  .md\:mx-\[-25px\] {
+    @media (width >= 768px) {
+      margin-inline: -25px;
+    }
+  }
+  .md\:mx-\[1\.5rem\] {
+    @media (width >= 768px) {
+      margin-inline: 1.5rem;
+    }
+  }
+  .md\:mx-\[4rem\] {
+    @media (width >= 768px) {
+      margin-inline: 4rem;
+    }
+  }
+  .md\:\!my-28 {
+    @media (width >= 768px) {
+      margin-block: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .md\:\!my-\[-5rem\] {
+    @media (width >= 768px) {
+      margin-block: -5rem !important;
+    }
+  }
+  .md\:\!my-\[6rem\] {
+    @media (width >= 768px) {
+      margin-block: 6rem !important;
+    }
+  }
+  .md\:\!my-\[7rem\] {
+    @media (width >= 768px) {
+      margin-block: 7rem !important;
+    }
+  }
+  .md\:\!mt-0 {
+    @media (width >= 768px) {
+      margin-top: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .md\:\!mt-5 {
+    @media (width >= 768px) {
+      margin-top: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .md\:\!mt-6 {
+    @media (width >= 768px) {
+      margin-top: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .md\:\!mt-7 {
+    @media (width >= 768px) {
+      margin-top: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .md\:\!mt-10 {
+    @media (width >= 768px) {
+      margin-top: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .md\:\!mt-12 {
+    @media (width >= 768px) {
+      margin-top: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .md\:\!mt-16 {
+    @media (width >= 768px) {
+      margin-top: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .md\:\!mt-20 {
+    @media (width >= 768px) {
+      margin-top: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .md\:\!mt-24 {
+    @media (width >= 768px) {
+      margin-top: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .md\:\!mt-28 {
+    @media (width >= 768px) {
+      margin-top: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .md\:\!mt-\[-0\.25rem\] {
+    @media (width >= 768px) {
+      margin-top: -0.25rem !important;
+    }
+  }
+  .md\:\!mt-\[-2\.5rem\] {
+    @media (width >= 768px) {
+      margin-top: -2.5rem !important;
+    }
+  }
+  .md\:\!mt-\[-2\.25rem\] {
+    @media (width >= 768px) {
+      margin-top: -2.25rem !important;
+    }
+  }
+  .md\:\!mt-\[-6rem\] {
+    @media (width >= 768px) {
+      margin-top: -6rem !important;
+    }
+  }
+  .md\:\!mt-\[-9rem\] {
+    @media (width >= 768px) {
+      margin-top: -9rem !important;
+    }
+  }
+  .md\:\!mt-\[-10rem\] {
+    @media (width >= 768px) {
+      margin-top: -10rem !important;
+    }
+  }
+  .md\:\!mt-\[-12\.5rem\] {
+    @media (width >= 768px) {
+      margin-top: -12.5rem !important;
+    }
+  }
+  .md\:\!mt-\[-15rem\] {
+    @media (width >= 768px) {
+      margin-top: -15rem !important;
+    }
+  }
+  .md\:\!mt-\[-17\.5rem\] {
+    @media (width >= 768px) {
+      margin-top: -17.5rem !important;
+    }
+  }
+  .md\:\!mt-\[-20rem\] {
+    @media (width >= 768px) {
+      margin-top: -20rem !important;
+    }
+  }
+  .md\:\!mt-\[-22\.5rem\] {
+    @media (width >= 768px) {
+      margin-top: -22.5rem !important;
+    }
+  }
+  .md\:\!mt-\[-45\%\] {
+    @media (width >= 768px) {
+      margin-top: -45% !important;
+    }
+  }
+  .md\:\!mt-\[-70px\] {
+    @media (width >= 768px) {
+      margin-top: -70px !important;
+    }
+  }
+  .md\:\!mt-\[-80px\] {
+    @media (width >= 768px) {
+      margin-top: -80px !important;
+    }
+  }
+  .md\:\!mt-\[3\.5rem\] {
+    @media (width >= 768px) {
+      margin-top: 3.5rem !important;
+    }
+  }
+  .md\:\!mt-\[4\.5rem\] {
+    @media (width >= 768px) {
+      margin-top: 4.5rem !important;
+    }
+  }
+  .md\:\!mt-\[6rem\] {
+    @media (width >= 768px) {
+      margin-top: 6rem !important;
+    }
+  }
+  .md\:\!mt-\[40px\] {
+    @media (width >= 768px) {
+      margin-top: 40px !important;
+    }
+  }
+  .md\:\!mt-\[80px\] {
+    @media (width >= 768px) {
+      margin-top: 80px !important;
+    }
+  }
+  .md\:\!mt-\[8rem\] {
+    @media (width >= 768px) {
+      margin-top: 8rem !important;
+    }
+  }
+  .md\:\!mt-\[9rem\] {
+    @media (width >= 768px) {
+      margin-top: 9rem !important;
+    }
+  }
+  .md\:\!mb-0 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .md\:\!mb-2 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .md\:\!mb-4 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .md\:\!mb-6 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .md\:\!mb-7 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .md\:\!mb-9 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .md\:\!mb-10 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .md\:\!mb-12 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .md\:\!mb-14 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .md\:\!mb-16 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .md\:\!mb-20 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .md\:\!mb-24 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .md\:\!mb-36 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .md\:\!mb-60 {
+    @media (width >= 768px) {
+      margin-bottom: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .md\:\!mb-\[-4\.5rem\] {
+    @media (width >= 768px) {
+      margin-bottom: -4.5rem !important;
+    }
+  }
+  .md\:\!mb-\[-10rem\] {
+    @media (width >= 768px) {
+      margin-bottom: -10rem !important;
+    }
+  }
+  .md\:\!mb-\[-15rem\] {
+    @media (width >= 768px) {
+      margin-bottom: -15rem !important;
+    }
+  }
+  .md\:\!mb-\[3\.5rem\] {
+    @media (width >= 768px) {
+      margin-bottom: 3.5rem !important;
+    }
+  }
+  .md\:\!mb-\[4\.5rem\] {
+    @media (width >= 768px) {
+      margin-bottom: 4.5rem !important;
+    }
+  }
+  .md\:\!mb-\[5rem\] {
+    @media (width >= 768px) {
+      margin-bottom: 5rem !important;
+    }
+  }
+  .md\:\!mb-\[6rem\] {
+    @media (width >= 768px) {
+      margin-bottom: 6rem !important;
+    }
+  }
+  .md\:\!mb-\[7rem\] {
+    @media (width >= 768px) {
+      margin-bottom: 7rem !important;
+    }
+  }
+  .md\:\!mb-\[8rem\] {
+    @media (width >= 768px) {
+      margin-bottom: 8rem !important;
+    }
+  }
+  .md\:\!mb-\[9rem\] {
+    @media (width >= 768px) {
+      margin-bottom: 9rem !important;
+    }
+  }
+  .md\:\!mb-\[10rem\] {
+    @media (width >= 768px) {
+      margin-bottom: 10rem !important;
+    }
+  }
+  .md\:\!ml-\[-2\.5rem\] {
+    @media (width >= 768px) {
+      margin-left: -2.5rem !important;
+    }
+  }
+  .md\:\!ml-\[8\.33333333\%\] {
+    @media (width >= 768px) {
+      margin-left: 8.33333333% !important;
+    }
+  }
+  .md\:\!ml-\[16\.66666667\%\] {
+    @media (width >= 768px) {
+      margin-left: 16.66666667% !important;
+    }
+  }
+  .md\:\!ml-\[25\%\] {
+    @media (width >= 768px) {
+      margin-left: 25% !important;
+    }
+  }
+  .md\:\!ml-auto {
+    @media (width >= 768px) {
+      margin-left: auto !important;
+    }
+  }
+  .md\:ml-0 {
+    @media (width >= 768px) {
+      margin-left: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:ml-\[30\%\] {
+    @media (width >= 768px) {
+      margin-left: 30%;
+    }
+  }
+  .md\:\!flex {
+    @media (width >= 768px) {
+      display: flex !important;
+    }
+  }
+  .md\:\!hidden {
+    @media (width >= 768px) {
+      display: none !important;
+    }
+  }
+  .md\:block {
+    @media (width >= 768px) {
+      display: block;
+    }
+  }
+  .md\:table {
+    @media (width >= 768px) {
+      display: table;
+    }
+  }
+  .md\:table-cell {
+    @media (width >= 768px) {
+      display: table-cell;
+    }
+  }
+  .md\:table-row {
+    @media (width >= 768px) {
+      display: table-row;
+    }
+  }
+  .md\:min-h-\[25rem\] {
+    @media (width >= 768px) {
+      min-height: 25rem;
+    }
+  }
+  .md\:w-1\/4 {
+    @media (width >= 768px) {
+      width: calc(1/4 * 100%);
+    }
+  }
+  .md\:w-2\/12 {
+    @media (width >= 768px) {
+      width: calc(2/12 * 100%);
+    }
+  }
+  .md\:w-3\/12 {
+    @media (width >= 768px) {
+      width: calc(3/12 * 100%);
+    }
+  }
+  .md\:w-4\/12 {
+    @media (width >= 768px) {
+      width: calc(4/12 * 100%);
+    }
+  }
+  .md\:w-5\/12 {
+    @media (width >= 768px) {
+      width: calc(5/12 * 100%);
+    }
+  }
+  .md\:w-6 {
+    @media (width >= 768px) {
+      width: calc(var(--spacing) * 6);
+    }
+  }
+  .md\:w-6\/12 {
+    @media (width >= 768px) {
+      width: calc(6/12 * 100%);
+    }
+  }
+  .md\:w-7\/12 {
+    @media (width >= 768px) {
+      width: calc(7/12 * 100%);
+    }
+  }
+  .md\:w-8 {
+    @media (width >= 768px) {
+      width: calc(var(--spacing) * 8);
+    }
+  }
+  .md\:w-8\/12 {
+    @media (width >= 768px) {
+      width: calc(8/12 * 100%);
+    }
+  }
+  .md\:w-9\/12 {
+    @media (width >= 768px) {
+      width: calc(9/12 * 100%);
+    }
+  }
+  .md\:w-10\/12 {
+    @media (width >= 768px) {
+      width: calc(10/12 * 100%);
+    }
+  }
+  .md\:w-11\/12 {
+    @media (width >= 768px) {
+      width: calc(11/12 * 100%);
+    }
+  }
+  .md\:w-\[55\%\] {
+    @media (width >= 768px) {
+      width: 55%;
+    }
+  }
+  .md\:w-\[70\%\] {
+    @media (width >= 768px) {
+      width: 70%;
+    }
+  }
+  .md\:w-full {
+    @media (width >= 768px) {
+      width: 100%;
+    }
+  }
+  .md\:\!-translate-y-2\/4 {
+    @media (width >= 768px) {
+      --tw-translate-y: calc(calc(2/4 * 100%) * -1) !important;
+      translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+    }
+  }
+  .md\:\!flex-row {
+    @media (width >= 768px) {
+      flex-direction: row !important;
+    }
+  }
+  .md\:\!justify-between {
+    @media (width >= 768px) {
+      justify-content: space-between !important;
+    }
+  }
+  .md\:rounded-2xl {
+    @media (width >= 768px) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+  .md\:rounded-\[1rem\] {
+    @media (width >= 768px) {
+      border-radius: 1rem;
+    }
+  }
+  .md\:\!p-8 {
+    @media (width >= 768px) {
+      padding: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .md\:\!p-10 {
+    @media (width >= 768px) {
+      padding: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .md\:\!p-12 {
+    @media (width >= 768px) {
+      padding: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .md\:\!p-\[1\.25rem_1\.75rem_1\.25rem\] {
+    @media (width >= 768px) {
+      padding: 1.25rem 1.75rem 1.25rem !important;
+    }
+  }
+  .md\:\!p-\[1\.25rem_2\.5rem_1\.25rem\] {
+    @media (width >= 768px) {
+      padding: 1.25rem 2.5rem 1.25rem !important;
+    }
+  }
+  .md\:\!p-\[1\.75rem_1\.75rem_1rem_1\.75rem\] {
+    @media (width >= 768px) {
+      padding: 1.75rem 1.75rem 1rem 1.75rem !important;
+    }
+  }
+  .md\:\!p-\[2\.5rem\] {
+    @media (width >= 768px) {
+      padding: 2.5rem !important;
+    }
+  }
+  .md\:\!p-\[2\.8rem_3rem_2\.8rem\] {
+    @media (width >= 768px) {
+      padding: 2.8rem 3rem 2.8rem !important;
+    }
+  }
+  .md\:\!p-\[2rem_2\.5rem_1\.25rem\] {
+    @media (width >= 768px) {
+      padding: 2rem 2.5rem 1.25rem !important;
+    }
+  }
+  .md\:\!p-\[6rem_15px_7rem\] {
+    @media (width >= 768px) {
+      padding: 6rem 15px 7rem !important;
+    }
+  }
+  .md\:\!p-\[7rem_15px_9rem\] {
+    @media (width >= 768px) {
+      padding: 7rem 15px 9rem !important;
+    }
+  }
+  .md\:p-0 {
+    @media (width >= 768px) {
+      padding: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:\!px-0 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .md\:\!px-3 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .md\:\!px-5 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .md\:\!px-6 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .md\:\!px-8 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .md\:\!px-10 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .md\:\!px-12 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .md\:\!px-14 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .md\:\!px-16 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .md\:\!px-20 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .md\:\!px-24 {
+    @media (width >= 768px) {
+      padding-inline: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .md\:\!px-\[0\.75rem\] {
+    @media (width >= 768px) {
+      padding-inline: 0.75rem !important;
+    }
+  }
+  .md\:\!px-\[12\.5px\] {
+    @media (width >= 768px) {
+      padding-inline: 12.5px !important;
+    }
+  }
+  .md\:\!px-\[20px\] {
+    @media (width >= 768px) {
+      padding-inline: 20px !important;
+    }
+  }
+  .md\:\!px-\[22\.5px\] {
+    @media (width >= 768px) {
+      padding-inline: 22.5px !important;
+    }
+  }
+  .md\:\!px-\[25px\] {
+    @media (width >= 768px) {
+      padding-inline: 25px !important;
+    }
+  }
+  .md\:\!py-5 {
+    @media (width >= 768px) {
+      padding-block: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .md\:\!py-6 {
+    @media (width >= 768px) {
+      padding-block: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .md\:\!py-7 {
+    @media (width >= 768px) {
+      padding-block: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .md\:\!py-20 {
+    @media (width >= 768px) {
+      padding-block: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .md\:\!py-24 {
+    @media (width >= 768px) {
+      padding-block: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .md\:\!py-28 {
+    @media (width >= 768px) {
+      padding-block: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .md\:\!py-\[4\.5rem\] {
+    @media (width >= 768px) {
+      padding-block: 4.5rem !important;
+    }
+  }
+  .md\:\!py-\[6rem\] {
+    @media (width >= 768px) {
+      padding-block: 6rem !important;
+    }
+  }
+  .md\:\!py-\[7rem\] {
+    @media (width >= 768px) {
+      padding-block: 7rem !important;
+    }
+  }
+  .md\:\!py-\[8rem\] {
+    @media (width >= 768px) {
+      padding-block: 8rem !important;
+    }
+  }
+  .md\:\!py-\[9rem\] {
+    @media (width >= 768px) {
+      padding-block: 9rem !important;
+    }
+  }
+  .md\:\!pt-\[4\.5rem\] {
+    @media (width >= 768px) {
+      padding-top: 4.5rem !important;
+    }
+  }
+  .md\:\!pt-\[10rem\] {
+    @media (width >= 768px) {
+      padding-top: 10rem !important;
+    }
+  }
+  .md\:pt-0 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:pt-10 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 10);
+    }
+  }
+  .md\:pt-12 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 12);
+    }
+  }
+  .md\:pt-14 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 14);
+    }
+  }
+  .md\:pt-16 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 16);
+    }
+  }
+  .md\:pt-20 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 20);
+    }
+  }
+  .md\:pt-24 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 24);
+    }
+  }
+  .md\:pt-28 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 28);
+    }
+  }
+  .md\:pt-32 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 32);
+    }
+  }
+  .md\:pt-36 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 36);
+    }
+  }
+  .md\:pt-40 {
+    @media (width >= 768px) {
+      padding-top: calc(var(--spacing) * 40);
+    }
+  }
+  .md\:pt-\[4\.5rem\] {
+    @media (width >= 768px) {
+      padding-top: 4.5rem;
+    }
+  }
+  .md\:pt-\[7rem\] {
+    @media (width >= 768px) {
+      padding-top: 7rem;
+    }
+  }
+  .md\:pt-\[8rem\] {
+    @media (width >= 768px) {
+      padding-top: 8rem;
+    }
+  }
+  .md\:pt-\[12\.5rem\] {
+    @media (width >= 768px) {
+      padding-top: 12.5rem;
+    }
+  }
+  .md\:pt-\[17\.5rem\] {
+    @media (width >= 768px) {
+      padding-top: 17.5rem;
+    }
+  }
+  .md\:\!pr-6 {
+    @media (width >= 768px) {
+      padding-right: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .md\:\!pr-10 {
+    @media (width >= 768px) {
+      padding-right: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .md\:\!pr-32 {
+    @media (width >= 768px) {
+      padding-right: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .md\:\!pr-\[2\.5rem\] {
+    @media (width >= 768px) {
+      padding-right: 2.5rem !important;
+    }
+  }
+  .md\:\!pb-24 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .md\:\!pb-40 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .md\:\!pb-60 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .md\:\!pb-\[5rem\] {
+    @media (width >= 768px) {
+      padding-bottom: 5rem !important;
+    }
+  }
+  .md\:\!pb-\[10rem\] {
+    @media (width >= 768px) {
+      padding-bottom: 10rem !important;
+    }
+  }
+  .md\:pb-0 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:pb-6 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 6);
+    }
+  }
+  .md\:pb-8 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 8);
+    }
+  }
+  .md\:pb-10 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 10);
+    }
+  }
+  .md\:pb-12 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 12);
+    }
+  }
+  .md\:pb-14 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 14);
+    }
+  }
+  .md\:pb-16 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 16);
+    }
+  }
+  .md\:pb-20 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 20);
+    }
+  }
+  .md\:pb-24 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 24);
+    }
+  }
+  .md\:pb-28 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 28);
+    }
+  }
+  .md\:pb-32 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 32);
+    }
+  }
+  .md\:pb-36 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 36);
+    }
+  }
+  .md\:pb-40 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 40);
+    }
+  }
+  .md\:pb-60 {
+    @media (width >= 768px) {
+      padding-bottom: calc(var(--spacing) * 60);
+    }
+  }
+  .md\:pb-\[3rem\] {
+    @media (width >= 768px) {
+      padding-bottom: 3rem;
+    }
+  }
+  .md\:pb-\[4\.5rem\] {
+    @media (width >= 768px) {
+      padding-bottom: 4.5rem;
+    }
+  }
+  .md\:pb-\[5rem\] {
+    @media (width >= 768px) {
+      padding-bottom: 5rem;
+    }
+  }
+  .md\:pb-\[7rem\] {
+    @media (width >= 768px) {
+      padding-bottom: 7rem;
+    }
+  }
+  .md\:pb-\[9rem\] {
+    @media (width >= 768px) {
+      padding-bottom: 9rem;
+    }
+  }
+  .md\:pb-\[12\.5rem\] {
+    @media (width >= 768px) {
+      padding-bottom: 12.5rem;
+    }
+  }
+  .md\:pb-\[17\.5rem\] {
+    @media (width >= 768px) {
+      padding-bottom: 17.5rem;
+    }
+  }
+  .md\:pb-\[22\.5rem\] {
+    @media (width >= 768px) {
+      padding-bottom: 22.5rem;
+    }
+  }
+  .md\:\!pl-6 {
+    @media (width >= 768px) {
+      padding-left: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .md\:\!text-right {
+    @media (width >= 768px) {
+      text-align: right !important;
+    }
+  }
+  .md\:text-left {
+    @media (width >= 768px) {
+      text-align: left;
+    }
+  }
+  .md\:text-right {
+    @media (width >= 768px) {
+      text-align: right;
+    }
+  }
+  .md\:align-top {
+    @media (width >= 768px) {
+      vertical-align: top;
+    }
+  }
+  .md\:\!text-\[1\.05rem\] {
+    @media (width >= 768px) {
+      font-size: 1.05rem !important;
+    }
+  }
+  .md\:\!text-\[calc\(1\.255rem_\+_0\.06vw\)\] {
+    @media (width >= 768px) {
+      font-size: calc(1.255rem + 0.06vw) !important;
+    }
+  }
+  .lg\:\!absolute {
+    @media (width >= 992px) {
+      position: absolute !important;
+    }
+  }
+  .lg\:\!sticky {
+    @media (width >= 992px) {
+      position: sticky !important;
+    }
+  }
+  .lg\:relative {
+    @media (width >= 992px) {
+      position: relative;
+    }
+  }
+  .lg\:z-\[3\] {
+    @media (width >= 992px) {
+      z-index: 3;
+    }
+  }
+  .lg\:z-\[4\] {
+    @media (width >= 992px) {
+      z-index: 4;
+    }
+  }
+  .lg\:\!-order-1 {
+    @media (width >= 992px) {
+      order: calc(1 * -1) !important;
+    }
+  }
+  .lg\:\!order-1 {
+    @media (width >= 992px) {
+      order: 1 !important;
+    }
+  }
+  .lg\:\!order-2 {
+    @media (width >= 992px) {
+      order: 2 !important;
+    }
+  }
+  .lg\:\!order-none {
+    @media (width >= 992px) {
+      order: 0 !important;
+    }
+  }
+  .lg\:order-2 {
+    @media (width >= 992px) {
+      order: 2;
+    }
+  }
+  .lg\:m-\[0_0_0_\.7rem\] {
+    @media (width >= 992px) {
+      margin: 0 0 0 .7rem;
+    }
+  }
+  .lg\:m-\[0_0_0_0\.7rem\] {
+    @media (width >= 992px) {
+      margin: 0 0 0 0.7rem;
+    }
+  }
+  .lg\:\!mx-5 {
+    @media (width >= 992px) {
+      margin-inline: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .lg\:mx-0 {
+    @media (width >= 992px) {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .lg\:mx-1 {
+    @media (width >= 992px) {
+      margin-inline: calc(var(--spacing) * 1);
+    }
+  }
+  .lg\:mx-5 {
+    @media (width >= 992px) {
+      margin-inline: calc(var(--spacing) * 5);
+    }
+  }
+  .lg\:mx-6 {
+    @media (width >= 992px) {
+      margin-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .lg\:mx-10 {
+    @media (width >= 992px) {
+      margin-inline: calc(var(--spacing) * 10);
+    }
+  }
+  .lg\:mx-\[-2\.5rem\] {
+    @media (width >= 992px) {
+      margin-inline: -2.5rem;
+    }
+  }
+  .lg\:mx-\[-7\.5px\] {
+    @media (width >= 992px) {
+      margin-inline: -7.5px;
+    }
+  }
+  .lg\:mx-\[-10px\] {
+    @media (width >= 992px) {
+      margin-inline: -10px;
+    }
+  }
+  .lg\:mx-\[-12\.5px\] {
+    @media (width >= 992px) {
+      margin-inline: -12.5px;
+    }
+  }
+  .lg\:mx-\[-15px\] {
+    @media (width >= 992px) {
+      margin-inline: -15px;
+    }
+  }
+  .lg\:mx-\[-20px\] {
+    @media (width >= 992px) {
+      margin-inline: -20px;
+    }
+  }
+  .lg\:mx-\[-22\.5px\] {
+    @media (width >= 992px) {
+      margin-inline: -22.5px;
+    }
+  }
+  .lg\:mx-\[-25px\] {
+    @media (width >= 992px) {
+      margin-inline: -25px;
+    }
+  }
+  .lg\:mx-\[-35px\] {
+    @media (width >= 992px) {
+      margin-inline: -35px;
+    }
+  }
+  .lg\:mx-\[1\.5rem\] {
+    @media (width >= 992px) {
+      margin-inline: 1.5rem;
+    }
+  }
+  .lg\:mx-\[2\.5rem\] {
+    @media (width >= 992px) {
+      margin-inline: 2.5rem;
+    }
+  }
+  .lg\:mx-auto {
+    @media (width >= 992px) {
+      margin-inline: auto;
+    }
+  }
+  .lg\:\!my-28 {
+    @media (width >= 992px) {
+      margin-block: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .lg\:\!my-\[-7rem\] {
+    @media (width >= 992px) {
+      margin-block: -7rem !important;
+    }
+  }
+  .lg\:\!my-\[6rem\] {
+    @media (width >= 992px) {
+      margin-block: 6rem !important;
+    }
+  }
+  .lg\:\!my-\[7rem\] {
+    @media (width >= 992px) {
+      margin-block: 7rem !important;
+    }
+  }
+  .lg\:\!mt-0 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .lg\:\!mt-2 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .lg\:\!mt-5 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .lg\:\!mt-6 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .lg\:\!mt-8 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .lg\:\!mt-10 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .lg\:\!mt-16 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .lg\:\!mt-20 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .lg\:\!mt-24 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .lg\:\!mt-28 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .lg\:\!mt-32 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .lg\:\!mt-\[-\.5rem\] {
+    @media (width >= 992px) {
+      margin-top: -.5rem !important;
+    }
+  }
+  .lg\:\!mt-\[-0\.25rem\] {
+    @media (width >= 992px) {
+      margin-top: -0.25rem !important;
+    }
+  }
+  .lg\:\!mt-\[-1\.5rem\] {
+    @media (width >= 992px) {
+      margin-top: -1.5rem !important;
+    }
+  }
+  .lg\:\!mt-\[-2\.5rem\] {
+    @media (width >= 992px) {
+      margin-top: -2.5rem !important;
+    }
+  }
+  .lg\:\!mt-\[-2\.25rem\] {
+    @media (width >= 992px) {
+      margin-top: -2.25rem !important;
+    }
+  }
+  .lg\:\!mt-\[-5rem\] {
+    @media (width >= 992px) {
+      margin-top: -5rem !important;
+    }
+  }
+  .lg\:\!mt-\[-6rem\] {
+    @media (width >= 992px) {
+      margin-top: -6rem !important;
+    }
+  }
+  .lg\:\!mt-\[-9rem\] {
+    @media (width >= 992px) {
+      margin-top: -9rem !important;
+    }
+  }
+  .lg\:\!mt-\[-10px\] {
+    @media (width >= 992px) {
+      margin-top: -10px !important;
+    }
+  }
+  .lg\:\!mt-\[-10rem\] {
+    @media (width >= 992px) {
+      margin-top: -10rem !important;
+    }
+  }
+  .lg\:\!mt-\[-12\.5rem\] {
+    @media (width >= 992px) {
+      margin-top: -12.5rem !important;
+    }
+  }
+  .lg\:\!mt-\[-15rem\] {
+    @media (width >= 992px) {
+      margin-top: -15rem !important;
+    }
+  }
+  .lg\:\!mt-\[-17\.5rem\] {
+    @media (width >= 992px) {
+      margin-top: -17.5rem !important;
+    }
+  }
+  .lg\:\!mt-\[-20px\] {
+    @media (width >= 992px) {
+      margin-top: -20px !important;
+    }
+  }
+  .lg\:\!mt-\[-20rem\] {
+    @media (width >= 992px) {
+      margin-top: -20rem !important;
+    }
+  }
+  .lg\:\!mt-\[-22\.5rem\] {
+    @media (width >= 992px) {
+      margin-top: -22.5rem !important;
+    }
+  }
+  .lg\:\!mt-\[-45\%\] {
+    @media (width >= 992px) {
+      margin-top: -45% !important;
+    }
+  }
+  .lg\:\!mt-\[-70px\] {
+    @media (width >= 992px) {
+      margin-top: -70px !important;
+    }
+  }
+  .lg\:\!mt-\[-80px\] {
+    @media (width >= 992px) {
+      margin-top: -80px !important;
+    }
+  }
+  .lg\:\!mt-\[2\.5rem\] {
+    @media (width >= 992px) {
+      margin-top: 2.5rem !important;
+    }
+  }
+  .lg\:\!mt-\[3\.5rem\] {
+    @media (width >= 992px) {
+      margin-top: 3.5rem !important;
+    }
+  }
+  .lg\:\!mt-\[4\.5rem\] {
+    @media (width >= 992px) {
+      margin-top: 4.5rem !important;
+    }
+  }
+  .lg\:\!mt-\[6rem\] {
+    @media (width >= 992px) {
+      margin-top: 6rem !important;
+    }
+  }
+  .lg\:\!mt-\[80px\] {
+    @media (width >= 992px) {
+      margin-top: 80px !important;
+    }
+  }
+  .lg\:\!mt-\[8rem\] {
+    @media (width >= 992px) {
+      margin-top: 8rem !important;
+    }
+  }
+  .lg\:\!mt-\[9rem\] {
+    @media (width >= 992px) {
+      margin-top: 9rem !important;
+    }
+  }
+  .lg\:\!mt-\[10px\] {
+    @media (width >= 992px) {
+      margin-top: 10px !important;
+    }
+  }
+  .lg\:\!mt-\[20px\] {
+    @media (width >= 992px) {
+      margin-top: 20px !important;
+    }
+  }
+  .lg\:\!mr-6 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .lg\:\!mr-8 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .lg\:\!mr-auto {
+    @media (width >= 992px) {
+      margin-right: auto !important;
+    }
+  }
+  .lg\:mr-\[-1\.25rem\] {
+    @media (width >= 992px) {
+      margin-right: -1.25rem;
+    }
+  }
+  .lg\:\!mb-0 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .lg\:\!mb-2 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .lg\:\!mb-3 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .lg\:\!mb-6 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .lg\:\!mb-7 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .lg\:\!mb-9 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .lg\:\!mb-12 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .lg\:\!mb-14 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .lg\:\!mb-16 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .lg\:\!mb-20 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .lg\:\!mb-24 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .lg\:\!mb-36 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .lg\:\!mb-40 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .lg\:\!mb-60 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .lg\:\!mb-\[-1\.5rem\] {
+    @media (width >= 992px) {
+      margin-bottom: -1.5rem !important;
+    }
+  }
+  .lg\:\!mb-\[-9rem\] {
+    @media (width >= 992px) {
+      margin-bottom: -9rem !important;
+    }
+  }
+  .lg\:\!mb-\[-10rem\] {
+    @media (width >= 992px) {
+      margin-bottom: -10rem !important;
+    }
+  }
+  .lg\:\!mb-\[-15rem\] {
+    @media (width >= 992px) {
+      margin-bottom: -15rem !important;
+    }
+  }
+  .lg\:\!mb-\[-17\.5rem\] {
+    @media (width >= 992px) {
+      margin-bottom: -17.5rem !important;
+    }
+  }
+  .lg\:\!mb-\[3\.5rem\] {
+    @media (width >= 992px) {
+      margin-bottom: 3.5rem !important;
+    }
+  }
+  .lg\:\!mb-\[4\.5rem\] {
+    @media (width >= 992px) {
+      margin-bottom: 4.5rem !important;
+    }
+  }
+  .lg\:\!mb-\[5rem\] {
+    @media (width >= 992px) {
+      margin-bottom: 5rem !important;
+    }
+  }
+  .lg\:\!mb-\[6rem\] {
+    @media (width >= 992px) {
+      margin-bottom: 6rem !important;
+    }
+  }
+  .lg\:\!mb-\[7rem\] {
+    @media (width >= 992px) {
+      margin-bottom: 7rem !important;
+    }
+  }
+  .lg\:\!mb-\[8rem\] {
+    @media (width >= 992px) {
+      margin-bottom: 8rem !important;
+    }
+  }
+  .lg\:\!mb-\[9rem\] {
+    @media (width >= 992px) {
+      margin-bottom: 9rem !important;
+    }
+  }
+  .lg\:\!mb-\[10rem\] {
+    @media (width >= 992px) {
+      margin-bottom: 10rem !important;
+    }
+  }
+  .lg\:\!mb-\[12\.5rem\] {
+    @media (width >= 992px) {
+      margin-bottom: 12.5rem !important;
+    }
+  }
+  .lg\:\!mb-\[22\.5rem\] {
+    @media (width >= 992px) {
+      margin-bottom: 22.5rem !important;
+    }
+  }
+  .lg\:\!ml-0 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .lg\:\!ml-4 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .lg\:\!ml-16 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .lg\:\!ml-\[2\.5rem\] {
+    @media (width >= 992px) {
+      margin-left: 2.5rem !important;
+    }
+  }
+  .lg\:\!ml-\[8\.33333333\%\] {
+    @media (width >= 992px) {
+      margin-left: 8.33333333% !important;
+    }
+  }
+  .lg\:\!ml-\[16\.66666667\%\] {
+    @media (width >= 992px) {
+      margin-left: 16.66666667% !important;
+    }
+  }
+  .lg\:\!ml-\[25\%\] {
+    @media (width >= 992px) {
+      margin-left: 25% !important;
+    }
+  }
+  .lg\:\!ml-\[41\.66666667\%\] {
+    @media (width >= 992px) {
+      margin-left: 41.66666667% !important;
+    }
+  }
+  .lg\:\!ml-\[50\%\] {
+    @media (width >= 992px) {
+      margin-left: 50% !important;
+    }
+  }
+  .lg\:\!ml-\[58\.33333333\%\] {
+    @media (width >= 992px) {
+      margin-left: 58.33333333% !important;
+    }
+  }
+  .lg\:\!ml-auto {
+    @media (width >= 992px) {
+      margin-left: auto !important;
+    }
+  }
+  .lg\:ml-0 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 0);
+    }
+  }
+  .lg\:ml-\[30\%\] {
+    @media (width >= 992px) {
+      margin-left: 30%;
+    }
+  }
+  .lg\:\!flex {
+    @media (width >= 992px) {
+      display: flex !important;
+    }
+  }
+  .lg\:\!hidden {
+    @media (width >= 992px) {
+      display: none !important;
+    }
+  }
+  .lg\:block {
+    @media (width >= 992px) {
+      display: block;
+    }
+  }
+  .lg\:inline-block {
+    @media (width >= 992px) {
+      display: inline-block;
+    }
+  }
+  .lg\:table {
+    @media (width >= 992px) {
+      display: table;
+    }
+  }
+  .lg\:table-cell {
+    @media (width >= 992px) {
+      display: table-cell;
+    }
+  }
+  .lg\:table-row {
+    @media (width >= 992px) {
+      display: table-row;
+    }
+  }
+  .lg\:h-auto {
+    @media (width >= 992px) {
+      height: auto;
+    }
+  }
+  .lg\:\!w-\[800px\] {
+    @media (width >= 992px) {
+      width: 800px !important;
+    }
+  }
+  .lg\:w-1\/5 {
+    @media (width >= 992px) {
+      width: calc(1/5 * 100%);
+    }
+  }
+  .lg\:w-2\/12 {
+    @media (width >= 992px) {
+      width: calc(2/12 * 100%);
+    }
+  }
+  .lg\:w-3\/12 {
+    @media (width >= 992px) {
+      width: calc(3/12 * 100%);
+    }
+  }
+  .lg\:w-4\/12 {
+    @media (width >= 992px) {
+      width: calc(4/12 * 100%);
+    }
+  }
+  .lg\:w-5\/12 {
+    @media (width >= 992px) {
+      width: calc(5/12 * 100%);
+    }
+  }
+  .lg\:w-6 {
+    @media (width >= 992px) {
+      width: calc(var(--spacing) * 6);
+    }
+  }
+  .lg\:w-6\/12 {
+    @media (width >= 992px) {
+      width: calc(6/12 * 100%);
+    }
+  }
+  .lg\:w-7\/12 {
+    @media (width >= 992px) {
+      width: calc(7/12 * 100%);
+    }
+  }
+  .lg\:w-8\/12 {
+    @media (width >= 992px) {
+      width: calc(8/12 * 100%);
+    }
+  }
+  .lg\:w-9\/12 {
+    @media (width >= 992px) {
+      width: calc(9/12 * 100%);
+    }
+  }
+  .lg\:w-10\/12 {
+    @media (width >= 992px) {
+      width: calc(10/12 * 100%);
+    }
+  }
+  .lg\:w-11\/12 {
+    @media (width >= 992px) {
+      width: calc(11/12 * 100%);
+    }
+  }
+  .lg\:w-\[14\.2857142857\%\] {
+    @media (width >= 992px) {
+      width: 14.2857142857%;
+    }
+  }
+  .lg\:w-\[55\%\] {
+    @media (width >= 992px) {
+      width: 55%;
+    }
+  }
+  .lg\:w-\[70\%\] {
+    @media (width >= 992px) {
+      width: 70%;
+    }
+  }
+  .lg\:w-full {
+    @media (width >= 992px) {
+      width: 100%;
+    }
+  }
+  .lg\:\!max-w-\[800px\] {
+    @media (width >= 992px) {
+      max-width: 800px !important;
+    }
+  }
+  .lg\:\!-translate-y-2\/4 {
+    @media (width >= 992px) {
+      --tw-translate-y: calc(calc(2/4 * 100%) * -1) !important;
+      translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+    }
+  }
+  .lg\:-translate-y-2\/4 {
+    @media (width >= 992px) {
+      --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .lg\:columns-2 {
+    @media (width >= 992px) {
+      columns: 2;
+    }
+  }
+  .lg\:columns-3 {
+    @media (width >= 992px) {
+      columns: 3;
+    }
+  }
+  .lg\:grid-cols-6 {
+    @media (width >= 992px) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .lg\:\!flex-col {
+    @media (width >= 992px) {
+      flex-direction: column !important;
+    }
+  }
+  .lg\:\!flex-row {
+    @media (width >= 992px) {
+      flex-direction: row !important;
+    }
+  }
+  .lg\:\!items-center {
+    @media (width >= 992px) {
+      align-items: center !important;
+    }
+  }
+  .lg\:\!justify-between {
+    @media (width >= 992px) {
+      justify-content: space-between !important;
+    }
+  }
+  .lg\:\!justify-center {
+    @media (width >= 992px) {
+      justify-content: center !important;
+    }
+  }
+  .lg\:\!justify-end {
+    @media (width >= 992px) {
+      justify-content: flex-end !important;
+    }
+  }
+  .lg\:\!justify-start {
+    @media (width >= 992px) {
+      justify-content: flex-start !important;
+    }
+  }
+  .lg\:rounded-2xl {
+    @media (width >= 992px) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+  .lg\:rounded-\[1rem\] {
+    @media (width >= 992px) {
+      border-radius: 1rem;
+    }
+  }
+  .lg\:rounded-tl-\[0\.4rem\] {
+    @media (width >= 992px) {
+      border-top-left-radius: 0.4rem;
+    }
+  }
+  .lg\:rounded-tl-\[0\.8rem\] {
+    @media (width >= 992px) {
+      border-top-left-radius: 0.8rem;
+    }
+  }
+  .lg\:rounded-tr-none {
+    @media (width >= 992px) {
+      border-top-right-radius: 0;
+    }
+  }
+  .lg\:rounded-br-none {
+    @media (width >= 992px) {
+      border-bottom-right-radius: 0;
+    }
+  }
+  .lg\:rounded-bl-\[0\.4rem\] {
+    @media (width >= 992px) {
+      border-bottom-left-radius: 0.4rem;
+    }
+  }
+  .lg\:rounded-bl-\[0\.8rem\] {
+    @media (width >= 992px) {
+      border-bottom-left-radius: 0.8rem;
+    }
+  }
+  .lg\:border-l {
+    @media (width >= 992px) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+  }
+  .lg\:border-solid {
+    @media (width >= 992px) {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .lg\:border-l-\[rgba\(164\,174\,198\,0\.2\)\] {
+    @media (width >= 992px) {
+      border-left-color: rgba(164,174,198,0.2);
+    }
+  }
+  .lg\:\!p-8 {
+    @media (width >= 992px) {
+      padding: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .lg\:\!p-10 {
+    @media (width >= 992px) {
+      padding: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .lg\:\!p-12 {
+    @media (width >= 992px) {
+      padding: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .lg\:\!p-\[1\.25rem_1\.75rem_1\.25rem\] {
+    @media (width >= 992px) {
+      padding: 1.25rem 1.75rem 1.25rem !important;
+    }
+  }
+  .lg\:\!p-\[1\.25rem_2\.5rem_1\.25rem\] {
+    @media (width >= 992px) {
+      padding: 1.25rem 2.5rem 1.25rem !important;
+    }
+  }
+  .lg\:\!p-\[1\.75rem_1\.75rem_1rem_1\.75rem\] {
+    @media (width >= 992px) {
+      padding: 1.75rem 1.75rem 1rem 1.75rem !important;
+    }
+  }
+  .lg\:\!p-\[2\.5rem\] {
+    @media (width >= 992px) {
+      padding: 2.5rem !important;
+    }
+  }
+  .lg\:\!p-\[2\.8rem_3rem_2\.8rem\] {
+    @media (width >= 992px) {
+      padding: 2.8rem 3rem 2.8rem !important;
+    }
+  }
+  .lg\:\!p-\[2rem_2\.5rem_1\.25rem\] {
+    @media (width >= 992px) {
+      padding: 2rem 2.5rem 1.25rem !important;
+    }
+  }
+  .lg\:\!p-\[4\.5rem\] {
+    @media (width >= 992px) {
+      padding: 4.5rem !important;
+    }
+  }
+  .lg\:\!p-\[4\.5rem_4rem\] {
+    @media (width >= 992px) {
+      padding: 4.5rem 4rem !important;
+    }
+  }
+  .lg\:\!p-\[4rem\] {
+    @media (width >= 992px) {
+      padding: 4rem !important;
+    }
+  }
+  .lg\:\!p-\[6rem_15px_7rem\] {
+    @media (width >= 992px) {
+      padding: 6rem 15px 7rem !important;
+    }
+  }
+  .lg\:\!p-\[7rem_15px_9rem\] {
+    @media (width >= 992px) {
+      padding: 7rem 15px 9rem !important;
+    }
+  }
+  .lg\:p-0 {
+    @media (width >= 992px) {
+      padding: calc(var(--spacing) * 0);
+    }
+  }
+  .lg\:\!px-0 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .lg\:\!px-2 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .lg\:\!px-3 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .lg\:\!px-4 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .lg\:\!px-5 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .lg\:\!px-6 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .lg\:\!px-7 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .lg\:\!px-8 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .lg\:\!px-10 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .lg\:\!px-12 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .lg\:\!px-14 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .lg\:\!px-24 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .lg\:\!px-32 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .lg\:\!px-36 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .lg\:\!px-40 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .lg\:\!px-\[0\.75rem\] {
+    @media (width >= 992px) {
+      padding-inline: 0.75rem !important;
+    }
+  }
+  .lg\:\!px-\[1\.25rem\] {
+    @media (width >= 992px) {
+      padding-inline: 1.25rem !important;
+    }
+  }
+  .lg\:\!px-\[10px\] {
+    @media (width >= 992px) {
+      padding-inline: 10px !important;
+    }
+  }
+  .lg\:\!px-\[12\.5px\] {
+    @media (width >= 992px) {
+      padding-inline: 12.5px !important;
+    }
+  }
+  .lg\:\!px-\[12\.5rem\] {
+    @media (width >= 992px) {
+      padding-inline: 12.5rem !important;
+    }
+  }
+  .lg\:\!px-\[15px\] {
+    @media (width >= 992px) {
+      padding-inline: 15px !important;
+    }
+  }
+  .lg\:\!px-\[20px\] {
+    @media (width >= 992px) {
+      padding-inline: 20px !important;
+    }
+  }
+  .lg\:\!px-\[22\.5px\] {
+    @media (width >= 992px) {
+      padding-inline: 22.5px !important;
+    }
+  }
+  .lg\:\!px-\[25px\] {
+    @media (width >= 992px) {
+      padding-inline: 25px !important;
+    }
+  }
+  .lg\:\!px-\[2rem\] {
+    @media (width >= 992px) {
+      padding-inline: 2rem !important;
+    }
+  }
+  .lg\:\!px-\[3\.5rem\] {
+    @media (width >= 992px) {
+      padding-inline: 3.5rem !important;
+    }
+  }
+  .lg\:\!px-\[35px\] {
+    @media (width >= 992px) {
+      padding-inline: 35px !important;
+    }
+  }
+  .lg\:\!px-\[3rem\] {
+    @media (width >= 992px) {
+      padding-inline: 3rem !important;
+    }
+  }
+  .lg\:\!px-\[4\.5rem\] {
+    @media (width >= 992px) {
+      padding-inline: 4.5rem !important;
+    }
+  }
+  .lg\:\!px-\[5rem\] {
+    @media (width >= 992px) {
+      padding-inline: 5rem !important;
+    }
+  }
+  .lg\:\!px-\[7\.5px\] {
+    @media (width >= 992px) {
+      padding-inline: 7.5px !important;
+    }
+  }
+  .lg\:\!px-\[7rem\] {
+    @media (width >= 992px) {
+      padding-inline: 7rem !important;
+    }
+  }
+  .lg\:px-0 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .lg\:\!py-5 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .lg\:\!py-6 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .lg\:\!py-16 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .lg\:\!py-20 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .lg\:\!py-24 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .lg\:\!py-28 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .lg\:\!py-\[4\.5rem\] {
+    @media (width >= 992px) {
+      padding-block: 4.5rem !important;
+    }
+  }
+  .lg\:\!py-\[6rem\] {
+    @media (width >= 992px) {
+      padding-block: 6rem !important;
+    }
+  }
+  .lg\:\!py-\[7rem\] {
+    @media (width >= 992px) {
+      padding-block: 7rem !important;
+    }
+  }
+  .lg\:\!py-\[8rem\] {
+    @media (width >= 992px) {
+      padding-block: 8rem !important;
+    }
+  }
+  .lg\:\!py-\[9rem\] {
+    @media (width >= 992px) {
+      padding-block: 9rem !important;
+    }
+  }
+  .lg\:py-28 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 28);
+    }
+  }
+  .lg\:\!pt-0 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .lg\:\!pt-\[4\.5rem\] {
+    @media (width >= 992px) {
+      padding-top: 4.5rem !important;
+    }
+  }
+  .lg\:\!pt-\[10rem\] {
+    @media (width >= 992px) {
+      padding-top: 10rem !important;
+    }
+  }
+  .lg\:pt-0 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 0);
+    }
+  }
+  .lg\:pt-6 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 6);
+    }
+  }
+  .lg\:pt-7 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 7);
+    }
+  }
+  .lg\:pt-8 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 8);
+    }
+  }
+  .lg\:pt-10 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 10);
+    }
+  }
+  .lg\:pt-12 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 12);
+    }
+  }
+  .lg\:pt-14 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 14);
+    }
+  }
+  .lg\:pt-16 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 16);
+    }
+  }
+  .lg\:pt-20 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 20);
+    }
+  }
+  .lg\:pt-24 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 24);
+    }
+  }
+  .lg\:pt-28 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 28);
+    }
+  }
+  .lg\:pt-32 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 32);
+    }
+  }
+  .lg\:pt-36 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 36);
+    }
+  }
+  .lg\:pt-40 {
+    @media (width >= 992px) {
+      padding-top: calc(var(--spacing) * 40);
+    }
+  }
+  .lg\:pt-\[\.3rem\] {
+    @media (width >= 992px) {
+      padding-top: .3rem;
+    }
+  }
+  .lg\:pt-\[4\.5rem\] {
+    @media (width >= 992px) {
+      padding-top: 4.5rem;
+    }
+  }
+  .lg\:pt-\[6px\] {
+    @media (width >= 992px) {
+      padding-top: 6px;
+    }
+  }
+  .lg\:pt-\[7rem\] {
+    @media (width >= 992px) {
+      padding-top: 7rem;
+    }
+  }
+  .lg\:pt-\[8rem\] {
+    @media (width >= 992px) {
+      padding-top: 8rem;
+    }
+  }
+  .lg\:pt-\[12\.5rem\] {
+    @media (width >= 992px) {
+      padding-top: 12.5rem;
+    }
+  }
+  .lg\:pt-\[17\.5rem\] {
+    @media (width >= 992px) {
+      padding-top: 17.5rem;
+    }
+  }
+  .lg\:\!pr-0 {
+    @media (width >= 992px) {
+      padding-right: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .lg\:\!pr-5 {
+    @media (width >= 992px) {
+      padding-right: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .lg\:\!pr-6 {
+    @media (width >= 992px) {
+      padding-right: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .lg\:\!pr-10 {
+    @media (width >= 992px) {
+      padding-right: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .lg\:\!pr-14 {
+    @media (width >= 992px) {
+      padding-right: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .lg\:\!pr-16 {
+    @media (width >= 992px) {
+      padding-right: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .lg\:\!pr-20 {
+    @media (width >= 992px) {
+      padding-right: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .lg\:\!pr-28 {
+    @media (width >= 992px) {
+      padding-right: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .lg\:\!pr-40 {
+    @media (width >= 992px) {
+      padding-right: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .lg\:\!pr-\[2\.5rem\] {
+    @media (width >= 992px) {
+      padding-right: 2.5rem !important;
+    }
+  }
+  .lg\:\!pb-24 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .lg\:\!pb-40 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .lg\:\!pb-60 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .lg\:\!pb-\[5rem\] {
+    @media (width >= 992px) {
+      padding-bottom: 5rem !important;
+    }
+  }
+  .lg\:\!pb-\[12\.5rem\] {
+    @media (width >= 992px) {
+      padding-bottom: 12.5rem !important;
+    }
+  }
+  .lg\:pb-0 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .lg\:pb-1 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 1);
+    }
+  }
+  .lg\:pb-2 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 2);
+    }
+  }
+  .lg\:pb-6 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 6);
+    }
+  }
+  .lg\:pb-8 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 8);
+    }
+  }
+  .lg\:pb-10 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 10);
+    }
+  }
+  .lg\:pb-12 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 12);
+    }
+  }
+  .lg\:pb-14 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 14);
+    }
+  }
+  .lg\:pb-16 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 16);
+    }
+  }
+  .lg\:pb-20 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 20);
+    }
+  }
+  .lg\:pb-24 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 24);
+    }
+  }
+  .lg\:pb-28 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 28);
+    }
+  }
+  .lg\:pb-32 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 32);
+    }
+  }
+  .lg\:pb-36 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 36);
+    }
+  }
+  .lg\:pb-40 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 40);
+    }
+  }
+  .lg\:pb-60 {
+    @media (width >= 992px) {
+      padding-bottom: calc(var(--spacing) * 60);
+    }
+  }
+  .lg\:pb-\[3rem\] {
+    @media (width >= 992px) {
+      padding-bottom: 3rem;
+    }
+  }
+  .lg\:pb-\[4\.5rem\] {
+    @media (width >= 992px) {
+      padding-bottom: 4.5rem;
+    }
+  }
+  .lg\:pb-\[7rem\] {
+    @media (width >= 992px) {
+      padding-bottom: 7rem;
+    }
+  }
+  .lg\:pb-\[12\.5rem\] {
+    @media (width >= 992px) {
+      padding-bottom: 12.5rem;
+    }
+  }
+  .lg\:pb-\[15rem\] {
+    @media (width >= 992px) {
+      padding-bottom: 15rem;
+    }
+  }
+  .lg\:pb-\[17\.5rem\] {
+    @media (width >= 992px) {
+      padding-bottom: 17.5rem;
+    }
+  }
+  .lg\:pb-\[22\.5rem\] {
+    @media (width >= 992px) {
+      padding-bottom: 22.5rem;
+    }
+  }
+  .lg\:\!pl-0 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .lg\:\!pl-6 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .lg\:\!pl-20 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .lg\:\!text-left {
+    @media (width >= 992px) {
+      text-align: left !important;
+    }
+  }
+  .lg\:\!text-right {
+    @media (width >= 992px) {
+      text-align: right !important;
+    }
+  }
+  .lg\:text-center {
+    @media (width >= 992px) {
+      text-align: center;
+    }
+  }
+  .lg\:text-left {
+    @media (width >= 992px) {
+      text-align: left;
+    }
+  }
+  .lg\:text-right {
+    @media (width >= 992px) {
+      text-align: right;
+    }
+  }
+  .lg\:align-top {
+    @media (width >= 992px) {
+      vertical-align: top;
+    }
+  }
+  .lg\:\!text-\[\.85rem\] {
+    @media (width >= 992px) {
+      font-size: .85rem !important;
+    }
+  }
+  .lg\:\!text-\[calc\(1\.255rem_\+_0\.06vw\)\] {
+    @media (width >= 992px) {
+      font-size: calc(1.255rem + 0.06vw) !important;
+    }
+  }
+  .lg\:\[background\:0_0\!important\] {
+    @media (width >= 992px) {
+      background: 0 0!important;
+    }
+  }
+  .xl\:\!absolute {
+    @media (width >= 1200px) {
+      position: absolute !important;
+    }
+  }
+  .xl\:\!sticky {
+    @media (width >= 1200px) {
+      position: sticky !important;
+    }
+  }
+  .xl\:relative {
+    @media (width >= 1200px) {
+      position: relative;
+    }
+  }
+  .xl\:z-\[3\] {
+    @media (width >= 1200px) {
+      z-index: 3;
+    }
+  }
+  .xl\:z-\[4\] {
+    @media (width >= 1200px) {
+      z-index: 4;
+    }
+  }
+  .xl\:\!-order-1 {
+    @media (width >= 1200px) {
+      order: calc(1 * -1) !important;
+    }
+  }
+  .xl\:\!order-1 {
+    @media (width >= 1200px) {
+      order: 1 !important;
+    }
+  }
+  .xl\:\!order-2 {
+    @media (width >= 1200px) {
+      order: 2 !important;
+    }
+  }
+  .xl\:\!order-3 {
+    @media (width >= 1200px) {
+      order: 3 !important;
+    }
+  }
+  .xl\:\!order-none {
+    @media (width >= 1200px) {
+      order: 0 !important;
+    }
+  }
+  .xl\:order-2 {
+    @media (width >= 1200px) {
+      order: 2;
+    }
+  }
+  .xl\:m-\[0_0_0_\.7rem\] {
+    @media (width >= 1200px) {
+      margin: 0 0 0 .7rem;
+    }
+  }
+  .xl\:m-\[0_0_0_0\.7rem\] {
+    @media (width >= 1200px) {
+      margin: 0 0 0 0.7rem;
+    }
+  }
+  .xl\:\!mx-5 {
+    @media (width >= 1200px) {
+      margin-inline: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xl\:mx-0 {
+    @media (width >= 1200px) {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .xl\:mx-1 {
+    @media (width >= 1200px) {
+      margin-inline: calc(var(--spacing) * 1);
+    }
+  }
+  .xl\:mx-5 {
+    @media (width >= 1200px) {
+      margin-inline: calc(var(--spacing) * 5);
+    }
+  }
+  .xl\:mx-6 {
+    @media (width >= 1200px) {
+      margin-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .xl\:mx-\[-7\.5px\] {
+    @media (width >= 1200px) {
+      margin-inline: -7.5px;
+    }
+  }
+  .xl\:mx-\[-10px\] {
+    @media (width >= 1200px) {
+      margin-inline: -10px;
+    }
+  }
+  .xl\:mx-\[-12\.5px\] {
+    @media (width >= 1200px) {
+      margin-inline: -12.5px;
+    }
+  }
+  .xl\:mx-\[-15px\] {
+    @media (width >= 1200px) {
+      margin-inline: -15px;
+    }
+  }
+  .xl\:mx-\[-20px\] {
+    @media (width >= 1200px) {
+      margin-inline: -20px;
+    }
+  }
+  .xl\:mx-\[-22\.5px\] {
+    @media (width >= 1200px) {
+      margin-inline: -22.5px;
+    }
+  }
+  .xl\:mx-\[-25px\] {
+    @media (width >= 1200px) {
+      margin-inline: -25px;
+    }
+  }
+  .xl\:mx-\[-30px\] {
+    @media (width >= 1200px) {
+      margin-inline: -30px;
+    }
+  }
+  .xl\:mx-\[-35px\] {
+    @media (width >= 1200px) {
+      margin-inline: -35px;
+    }
+  }
+  .xl\:mx-\[1\.5rem\] {
+    @media (width >= 1200px) {
+      margin-inline: 1.5rem;
+    }
+  }
+  .xl\:mx-\[2\.5rem\] {
+    @media (width >= 1200px) {
+      margin-inline: 2.5rem;
+    }
+  }
+  .xl\:mx-auto {
+    @media (width >= 1200px) {
+      margin-inline: auto;
+    }
+  }
+  .xl\:\!my-28 {
+    @media (width >= 1200px) {
+      margin-block: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .xl\:\!my-\[-7rem\] {
+    @media (width >= 1200px) {
+      margin-block: -7rem !important;
+    }
+  }
+  .xl\:\!my-\[6rem\] {
+    @media (width >= 1200px) {
+      margin-block: 6rem !important;
+    }
+  }
+  .xl\:\!my-\[7rem\] {
+    @media (width >= 1200px) {
+      margin-block: 7rem !important;
+    }
+  }
+  .xl\:\!mt-0 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xl\:\!mt-2 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .xl\:\!mt-5 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xl\:\!mt-6 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .xl\:\!mt-8 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .xl\:\!mt-10 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .xl\:\!mt-16 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .xl\:\!mt-20 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .xl\:\!mt-24 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .xl\:\!mt-28 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .xl\:\!mt-32 {
+    @media (width >= 1200px) {
+      margin-top: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .xl\:\!mt-\[-\.5rem\] {
+    @media (width >= 1200px) {
+      margin-top: -.5rem !important;
+    }
+  }
+  .xl\:\!mt-\[-0\.25rem\] {
+    @media (width >= 1200px) {
+      margin-top: -0.25rem !important;
+    }
+  }
+  .xl\:\!mt-\[-1\.5rem\] {
+    @media (width >= 1200px) {
+      margin-top: -1.5rem !important;
+    }
+  }
+  .xl\:\!mt-\[-2\.5rem\] {
+    @media (width >= 1200px) {
+      margin-top: -2.5rem !important;
+    }
+  }
+  .xl\:\!mt-\[-2\.25rem\] {
+    @media (width >= 1200px) {
+      margin-top: -2.25rem !important;
+    }
+  }
+  .xl\:\!mt-\[-3\.5rem\] {
+    @media (width >= 1200px) {
+      margin-top: -3.5rem !important;
+    }
+  }
+  .xl\:\!mt-\[-6rem\] {
+    @media (width >= 1200px) {
+      margin-top: -6rem !important;
+    }
+  }
+  .xl\:\!mt-\[-9rem\] {
+    @media (width >= 1200px) {
+      margin-top: -9rem !important;
+    }
+  }
+  .xl\:\!mt-\[-10px\] {
+    @media (width >= 1200px) {
+      margin-top: -10px !important;
+    }
+  }
+  .xl\:\!mt-\[-10rem\] {
+    @media (width >= 1200px) {
+      margin-top: -10rem !important;
+    }
+  }
+  .xl\:\!mt-\[-12\.5rem\] {
+    @media (width >= 1200px) {
+      margin-top: -12.5rem !important;
+    }
+  }
+  .xl\:\!mt-\[-15rem\] {
+    @media (width >= 1200px) {
+      margin-top: -15rem !important;
+    }
+  }
+  .xl\:\!mt-\[-17\.5rem\] {
+    @media (width >= 1200px) {
+      margin-top: -17.5rem !important;
+    }
+  }
+  .xl\:\!mt-\[-20px\] {
+    @media (width >= 1200px) {
+      margin-top: -20px !important;
+    }
+  }
+  .xl\:\!mt-\[-20rem\] {
+    @media (width >= 1200px) {
+      margin-top: -20rem !important;
+    }
+  }
+  .xl\:\!mt-\[-22\.5rem\] {
+    @media (width >= 1200px) {
+      margin-top: -22.5rem !important;
+    }
+  }
+  .xl\:\!mt-\[-45\%\] {
+    @media (width >= 1200px) {
+      margin-top: -45% !important;
+    }
+  }
+  .xl\:\!mt-\[-45px\] {
+    @media (width >= 1200px) {
+      margin-top: -45px !important;
+    }
+  }
+  .xl\:\!mt-\[-70px\] {
+    @media (width >= 1200px) {
+      margin-top: -70px !important;
+    }
+  }
+  .xl\:\!mt-\[-80px\] {
+    @media (width >= 1200px) {
+      margin-top: -80px !important;
+    }
+  }
+  .xl\:\!mt-\[2\.5rem\] {
+    @media (width >= 1200px) {
+      margin-top: 2.5rem !important;
+    }
+  }
+  .xl\:\!mt-\[3\.5rem\] {
+    @media (width >= 1200px) {
+      margin-top: 3.5rem !important;
+    }
+  }
+  .xl\:\!mt-\[4\.5rem\] {
+    @media (width >= 1200px) {
+      margin-top: 4.5rem !important;
+    }
+  }
+  .xl\:\!mt-\[6rem\] {
+    @media (width >= 1200px) {
+      margin-top: 6rem !important;
+    }
+  }
+  .xl\:\!mt-\[8rem\] {
+    @media (width >= 1200px) {
+      margin-top: 8rem !important;
+    }
+  }
+  .xl\:\!mt-\[9rem\] {
+    @media (width >= 1200px) {
+      margin-top: 9rem !important;
+    }
+  }
+  .xl\:\!mt-\[10px\] {
+    @media (width >= 1200px) {
+      margin-top: 10px !important;
+    }
+  }
+  .xl\:\!mt-\[20px\] {
+    @media (width >= 1200px) {
+      margin-top: 20px !important;
+    }
+  }
+  .xl\:\!mt-\[80px\] {
+    @media (width >= 1200px) {
+      margin-top: 80px !important;
+    }
+  }
+  .xl\:\!mr-5 {
+    @media (width >= 1200px) {
+      margin-right: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xl\:\!mr-6 {
+    @media (width >= 1200px) {
+      margin-right: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .xl\:\!mr-8 {
+    @media (width >= 1200px) {
+      margin-right: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .xl\:\!mr-auto {
+    @media (width >= 1200px) {
+      margin-right: auto !important;
+    }
+  }
+  .xl\:mr-\[-1\.25rem\] {
+    @media (width >= 1200px) {
+      margin-right: -1.25rem;
+    }
+  }
+  .xl\:\!mb-0 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xl\:\!mb-2 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .xl\:\!mb-6 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .xl\:\!mb-7 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .xl\:\!mb-9 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .xl\:\!mb-12 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .xl\:\!mb-14 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .xl\:\!mb-16 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .xl\:\!mb-20 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .xl\:\!mb-24 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .xl\:\!mb-36 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .xl\:\!mb-40 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .xl\:\!mb-60 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .xl\:\!mb-80 {
+    @media (width >= 1200px) {
+      margin-bottom: calc(var(--spacing) * 80) !important;
+    }
+  }
+  .xl\:\!mb-\[-1\.5rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: -1.5rem !important;
+    }
+  }
+  .xl\:\!mb-\[-9rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: -9rem !important;
+    }
+  }
+  .xl\:\!mb-\[-10rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: -10rem !important;
+    }
+  }
+  .xl\:\!mb-\[-15rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: -15rem !important;
+    }
+  }
+  .xl\:\!mb-\[-17\.5rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: -17.5rem !important;
+    }
+  }
+  .xl\:\!mb-\[3\.5rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 3.5rem !important;
+    }
+  }
+  .xl\:\!mb-\[4\.5rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 4.5rem !important;
+    }
+  }
+  .xl\:\!mb-\[5rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 5rem !important;
+    }
+  }
+  .xl\:\!mb-\[6rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 6rem !important;
+    }
+  }
+  .xl\:\!mb-\[7rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 7rem !important;
+    }
+  }
+  .xl\:\!mb-\[8rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 8rem !important;
+    }
+  }
+  .xl\:\!mb-\[9rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 9rem !important;
+    }
+  }
+  .xl\:\!mb-\[10rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 10rem !important;
+    }
+  }
+  .xl\:\!mb-\[15rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 15rem !important;
+    }
+  }
+  .xl\:\!mb-\[17\.5rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 17.5rem !important;
+    }
+  }
+  .xl\:\!mb-\[22\.5rem\] {
+    @media (width >= 1200px) {
+      margin-bottom: 22.5rem !important;
+    }
+  }
+  .xl\:\!ml-0 {
+    @media (width >= 1200px) {
+      margin-left: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xl\:\!ml-4 {
+    @media (width >= 1200px) {
+      margin-left: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .xl\:\!ml-5 {
+    @media (width >= 1200px) {
+      margin-left: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xl\:\!ml-16 {
+    @media (width >= 1200px) {
+      margin-left: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .xl\:\!ml-\[2\.5rem\] {
+    @media (width >= 1200px) {
+      margin-left: 2.5rem !important;
+    }
+  }
+  .xl\:\!ml-\[8\.33333333\%\] {
+    @media (width >= 1200px) {
+      margin-left: 8.33333333% !important;
+    }
+  }
+  .xl\:\!ml-\[16\.66666667\%\] {
+    @media (width >= 1200px) {
+      margin-left: 16.66666667% !important;
+    }
+  }
+  .xl\:\!ml-\[33\.33333333\%\] {
+    @media (width >= 1200px) {
+      margin-left: 33.33333333% !important;
+    }
+  }
+  .xl\:\!ml-\[41\.66666667\%\] {
+    @media (width >= 1200px) {
+      margin-left: 41.66666667% !important;
+    }
+  }
+  .xl\:\!ml-\[50\%\] {
+    @media (width >= 1200px) {
+      margin-left: 50% !important;
+    }
+  }
+  .xl\:\!ml-auto {
+    @media (width >= 1200px) {
+      margin-left: auto !important;
+    }
+  }
+  .xl\:ml-0 {
+    @media (width >= 1200px) {
+      margin-left: calc(var(--spacing) * 0);
+    }
+  }
+  .xl\:ml-\[30\%\] {
+    @media (width >= 1200px) {
+      margin-left: 30%;
+    }
+  }
+  .xl\:\!flex {
+    @media (width >= 1200px) {
+      display: flex !important;
+    }
+  }
+  .xl\:\!hidden {
+    @media (width >= 1200px) {
+      display: none !important;
+    }
+  }
+  .xl\:block {
+    @media (width >= 1200px) {
+      display: block;
+    }
+  }
+  .xl\:inline-block {
+    @media (width >= 1200px) {
+      display: inline-block;
+    }
+  }
+  .xl\:table {
+    @media (width >= 1200px) {
+      display: table;
+    }
+  }
+  .xl\:table-cell {
+    @media (width >= 1200px) {
+      display: table-cell;
+    }
+  }
+  .xl\:table-row {
+    @media (width >= 1200px) {
+      display: table-row;
+    }
+  }
+  .xl\:h-auto {
+    @media (width >= 1200px) {
+      height: auto;
+    }
+  }
+  .xl\:\!w-\[1140px\] {
+    @media (width >= 1200px) {
+      width: 1140px !important;
+    }
+  }
+  .xl\:w-1\/5 {
+    @media (width >= 1200px) {
+      width: calc(1/5 * 100%);
+    }
+  }
+  .xl\:w-2\/12 {
+    @media (width >= 1200px) {
+      width: calc(2/12 * 100%);
+    }
+  }
+  .xl\:w-3\/12 {
+    @media (width >= 1200px) {
+      width: calc(3/12 * 100%);
+    }
+  }
+  .xl\:w-4\/12 {
+    @media (width >= 1200px) {
+      width: calc(4/12 * 100%);
+    }
+  }
+  .xl\:w-5 {
+    @media (width >= 1200px) {
+      width: calc(var(--spacing) * 5);
+    }
+  }
+  .xl\:w-5\/12 {
+    @media (width >= 1200px) {
+      width: calc(5/12 * 100%);
+    }
+  }
+  .xl\:w-6 {
+    @media (width >= 1200px) {
+      width: calc(var(--spacing) * 6);
+    }
+  }
+  .xl\:w-6\/12 {
+    @media (width >= 1200px) {
+      width: calc(6/12 * 100%);
+    }
+  }
+  .xl\:w-7\/12 {
+    @media (width >= 1200px) {
+      width: calc(7/12 * 100%);
+    }
+  }
+  .xl\:w-8\/12 {
+    @media (width >= 1200px) {
+      width: calc(8/12 * 100%);
+    }
+  }
+  .xl\:w-9\/12 {
+    @media (width >= 1200px) {
+      width: calc(9/12 * 100%);
+    }
+  }
+  .xl\:w-10\/12 {
+    @media (width >= 1200px) {
+      width: calc(10/12 * 100%);
+    }
+  }
+  .xl\:w-11\/12 {
+    @media (width >= 1200px) {
+      width: calc(11/12 * 100%);
+    }
+  }
+  .xl\:w-\[14\.2857142857\%\] {
+    @media (width >= 1200px) {
+      width: 14.2857142857%;
+    }
+  }
+  .xl\:w-\[55\%\] {
+    @media (width >= 1200px) {
+      width: 55%;
+    }
+  }
+  .xl\:w-\[70\%\] {
+    @media (width >= 1200px) {
+      width: 70%;
+    }
+  }
+  .xl\:w-full {
+    @media (width >= 1200px) {
+      width: 100%;
+    }
+  }
+  .xl\:\!max-w-\[1140px\] {
+    @media (width >= 1200px) {
+      max-width: 1140px !important;
+    }
+  }
+  .xl\:\!-translate-y-2\/4 {
+    @media (width >= 1200px) {
+      --tw-translate-y: calc(calc(2/4 * 100%) * -1) !important;
+      translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+    }
+  }
+  .xl\:-translate-y-2\/4 {
+    @media (width >= 1200px) {
+      --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .xl\:columns-2 {
+    @media (width >= 1200px) {
+      columns: 2;
+    }
+  }
+  .xl\:columns-3 {
+    @media (width >= 1200px) {
+      columns: 3;
+    }
+  }
+  .xl\:grid-cols-6 {
+    @media (width >= 1200px) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .xl\:\!flex-col {
+    @media (width >= 1200px) {
+      flex-direction: column !important;
+    }
+  }
+  .xl\:\!flex-row {
+    @media (width >= 1200px) {
+      flex-direction: row !important;
+    }
+  }
+  .xl\:\!items-center {
+    @media (width >= 1200px) {
+      align-items: center !important;
+    }
+  }
+  .xl\:\!justify-between {
+    @media (width >= 1200px) {
+      justify-content: space-between !important;
+    }
+  }
+  .xl\:\!justify-center {
+    @media (width >= 1200px) {
+      justify-content: center !important;
+    }
+  }
+  .xl\:\!justify-end {
+    @media (width >= 1200px) {
+      justify-content: flex-end !important;
+    }
+  }
+  .xl\:\!justify-start {
+    @media (width >= 1200px) {
+      justify-content: flex-start !important;
+    }
+  }
+  .xl\:rounded-2xl {
+    @media (width >= 1200px) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+  .xl\:rounded-\[1rem\] {
+    @media (width >= 1200px) {
+      border-radius: 1rem;
+    }
+  }
+  .xl\:rounded-tl-\[0\.4rem\] {
+    @media (width >= 1200px) {
+      border-top-left-radius: 0.4rem;
+    }
+  }
+  .xl\:rounded-tl-\[0\.8rem\] {
+    @media (width >= 1200px) {
+      border-top-left-radius: 0.8rem;
+    }
+  }
+  .xl\:rounded-tr-none {
+    @media (width >= 1200px) {
+      border-top-right-radius: 0;
+    }
+  }
+  .xl\:rounded-br-none {
+    @media (width >= 1200px) {
+      border-bottom-right-radius: 0;
+    }
+  }
+  .xl\:rounded-bl-\[0\.4rem\] {
+    @media (width >= 1200px) {
+      border-bottom-left-radius: 0.4rem;
+    }
+  }
+  .xl\:rounded-bl-\[0\.8rem\] {
+    @media (width >= 1200px) {
+      border-bottom-left-radius: 0.8rem;
+    }
+  }
+  .xl\:border-l {
+    @media (width >= 1200px) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+  }
+  .xl\:border-solid {
+    @media (width >= 1200px) {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .xl\:border-l-\[rgba\(164\,174\,198\,0\.2\)\] {
+    @media (width >= 1200px) {
+      border-left-color: rgba(164,174,198,0.2);
+    }
+  }
+  .xl\:\!p-8 {
+    @media (width >= 1200px) {
+      padding: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .xl\:\!p-10 {
+    @media (width >= 1200px) {
+      padding: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .xl\:\!p-12 {
+    @media (width >= 1200px) {
+      padding: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .xl\:\!p-14 {
+    @media (width >= 1200px) {
+      padding: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .xl\:\!p-16 {
+    @media (width >= 1200px) {
+      padding: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .xl\:\!p-\[1\.25rem_1\.75rem_1\.25rem\] {
+    @media (width >= 1200px) {
+      padding: 1.25rem 1.75rem 1.25rem !important;
+    }
+  }
+  .xl\:\!p-\[1\.25rem_2\.5rem_1\.25rem\] {
+    @media (width >= 1200px) {
+      padding: 1.25rem 2.5rem 1.25rem !important;
+    }
+  }
+  .xl\:\!p-\[1\.75rem_1\.75rem_1rem_1\.75rem\] {
+    @media (width >= 1200px) {
+      padding: 1.75rem 1.75rem 1rem 1.75rem !important;
+    }
+  }
+  .xl\:\!p-\[2\.5rem\] {
+    @media (width >= 1200px) {
+      padding: 2.5rem !important;
+    }
+  }
+  .xl\:\!p-\[2\.8rem_3rem_2\.8rem\] {
+    @media (width >= 1200px) {
+      padding: 2.8rem 3rem 2.8rem !important;
+    }
+  }
+  .xl\:\!p-\[2rem_2\.5rem_1\.25rem\] {
+    @media (width >= 1200px) {
+      padding: 2rem 2.5rem 1.25rem !important;
+    }
+  }
+  .xl\:\!p-\[3rem\] {
+    @media (width >= 1200px) {
+      padding: 3rem !important;
+    }
+  }
+  .xl\:\!p-\[4\.5rem\] {
+    @media (width >= 1200px) {
+      padding: 4.5rem !important;
+    }
+  }
+  .xl\:\!p-\[4\.5rem_4rem\] {
+    @media (width >= 1200px) {
+      padding: 4.5rem 4rem !important;
+    }
+  }
+  .xl\:\!p-\[4rem\] {
+    @media (width >= 1200px) {
+      padding: 4rem !important;
+    }
+  }
+  .xl\:\!p-\[6rem_15px_7rem\] {
+    @media (width >= 1200px) {
+      padding: 6rem 15px 7rem !important;
+    }
+  }
+  .xl\:\!p-\[7rem_15px_9rem\] {
+    @media (width >= 1200px) {
+      padding: 7rem 15px 9rem !important;
+    }
+  }
+  .xl\:p-0 {
+    @media (width >= 1200px) {
+      padding: calc(var(--spacing) * 0);
+    }
+  }
+  .xl\:\!px-0 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xl\:\!px-2 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .xl\:\!px-3 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .xl\:\!px-5 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xl\:\!px-6 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .xl\:\!px-7 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .xl\:\!px-8 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .xl\:\!px-9 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .xl\:\!px-10 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .xl\:\!px-12 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .xl\:\!px-14 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .xl\:\!px-16 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .xl\:\!px-20 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .xl\:\!px-24 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .xl\:\!px-32 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .xl\:\!px-40 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .xl\:\!px-\[0\.5rem\] {
+    @media (width >= 1200px) {
+      padding-inline: 0.5rem !important;
+    }
+  }
+  .xl\:\!px-\[1\.25rem\] {
+    @media (width >= 1200px) {
+      padding-inline: 1.25rem !important;
+    }
+  }
+  .xl\:\!px-\[2rem\] {
+    @media (width >= 1200px) {
+      padding-inline: 2rem !important;
+    }
+  }
+  .xl\:\!px-\[3\.5rem\] {
+    @media (width >= 1200px) {
+      padding-inline: 3.5rem !important;
+    }
+  }
+  .xl\:\!px-\[4\.5rem\] {
+    @media (width >= 1200px) {
+      padding-inline: 4.5rem !important;
+    }
+  }
+  .xl\:\!px-\[5rem\] {
+    @media (width >= 1200px) {
+      padding-inline: 5rem !important;
+    }
+  }
+  .xl\:\!px-\[7\.5px\] {
+    @media (width >= 1200px) {
+      padding-inline: 7.5px !important;
+    }
+  }
+  .xl\:\!px-\[7rem\] {
+    @media (width >= 1200px) {
+      padding-inline: 7rem !important;
+    }
+  }
+  .xl\:\!px-\[10px\] {
+    @media (width >= 1200px) {
+      padding-inline: 10px !important;
+    }
+  }
+  .xl\:\!px-\[12\.5px\] {
+    @media (width >= 1200px) {
+      padding-inline: 12.5px !important;
+    }
+  }
+  .xl\:\!px-\[15px\] {
+    @media (width >= 1200px) {
+      padding-inline: 15px !important;
+    }
+  }
+  .xl\:\!px-\[20px\] {
+    @media (width >= 1200px) {
+      padding-inline: 20px !important;
+    }
+  }
+  .xl\:\!px-\[22\.5px\] {
+    @media (width >= 1200px) {
+      padding-inline: 22.5px !important;
+    }
+  }
+  .xl\:\!px-\[25px\] {
+    @media (width >= 1200px) {
+      padding-inline: 25px !important;
+    }
+  }
+  .xl\:\!px-\[30px\] {
+    @media (width >= 1200px) {
+      padding-inline: 30px !important;
+    }
+  }
+  .xl\:\!px-\[35px\] {
+    @media (width >= 1200px) {
+      padding-inline: 35px !important;
+    }
+  }
+  .xl\:\!px-\[3rem\] {
+    @media (width >= 1200px) {
+      padding-inline: 3rem !important;
+    }
+  }
+  .xl\:px-0 {
+    @media (width >= 1200px) {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .xl\:\!py-5 {
+    @media (width >= 1200px) {
+      padding-block: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xl\:\!py-6 {
+    @media (width >= 1200px) {
+      padding-block: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .xl\:\!py-12 {
+    @media (width >= 1200px) {
+      padding-block: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .xl\:\!py-16 {
+    @media (width >= 1200px) {
+      padding-block: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .xl\:\!py-20 {
+    @media (width >= 1200px) {
+      padding-block: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .xl\:\!py-24 {
+    @media (width >= 1200px) {
+      padding-block: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .xl\:\!py-28 {
+    @media (width >= 1200px) {
+      padding-block: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .xl\:\!py-36 {
+    @media (width >= 1200px) {
+      padding-block: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .xl\:\!py-40 {
+    @media (width >= 1200px) {
+      padding-block: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .xl\:\!py-\[4\.5rem\] {
+    @media (width >= 1200px) {
+      padding-block: 4.5rem !important;
+    }
+  }
+  .xl\:\!py-\[6rem\] {
+    @media (width >= 1200px) {
+      padding-block: 6rem !important;
+    }
+  }
+  .xl\:\!py-\[7rem\] {
+    @media (width >= 1200px) {
+      padding-block: 7rem !important;
+    }
+  }
+  .xl\:\!py-\[8rem\] {
+    @media (width >= 1200px) {
+      padding-block: 8rem !important;
+    }
+  }
+  .xl\:\!py-\[9rem\] {
+    @media (width >= 1200px) {
+      padding-block: 9rem !important;
+    }
+  }
+  .xl\:py-36 {
+    @media (width >= 1200px) {
+      padding-block: calc(var(--spacing) * 36);
+    }
+  }
+  .xl\:\!pt-0 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xl\:\!pt-10 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .xl\:\!pt-14 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .xl\:\!pt-\[4\.5rem\] {
+    @media (width >= 1200px) {
+      padding-top: 4.5rem !important;
+    }
+  }
+  .xl\:\!pt-\[10rem\] {
+    @media (width >= 1200px) {
+      padding-top: 10rem !important;
+    }
+  }
+  .xl\:pt-0 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 0);
+    }
+  }
+  .xl\:pt-6 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 6);
+    }
+  }
+  .xl\:pt-7 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 7);
+    }
+  }
+  .xl\:pt-8 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 8);
+    }
+  }
+  .xl\:pt-10 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 10);
+    }
+  }
+  .xl\:pt-12 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 12);
+    }
+  }
+  .xl\:pt-14 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 14);
+    }
+  }
+  .xl\:pt-16 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 16);
+    }
+  }
+  .xl\:pt-20 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 20);
+    }
+  }
+  .xl\:pt-24 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 24);
+    }
+  }
+  .xl\:pt-28 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 28);
+    }
+  }
+  .xl\:pt-32 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 32);
+    }
+  }
+  .xl\:pt-36 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 36);
+    }
+  }
+  .xl\:pt-40 {
+    @media (width >= 1200px) {
+      padding-top: calc(var(--spacing) * 40);
+    }
+  }
+  .xl\:pt-\[\.3rem\] {
+    @media (width >= 1200px) {
+      padding-top: .3rem;
+    }
+  }
+  .xl\:pt-\[4\.5rem\] {
+    @media (width >= 1200px) {
+      padding-top: 4.5rem;
+    }
+  }
+  .xl\:pt-\[6px\] {
+    @media (width >= 1200px) {
+      padding-top: 6px;
+    }
+  }
+  .xl\:pt-\[7rem\] {
+    @media (width >= 1200px) {
+      padding-top: 7rem;
+    }
+  }
+  .xl\:pt-\[8rem\] {
+    @media (width >= 1200px) {
+      padding-top: 8rem;
+    }
+  }
+  .xl\:pt-\[12\.5rem\] {
+    @media (width >= 1200px) {
+      padding-top: 12.5rem;
+    }
+  }
+  .xl\:pt-\[17\.5rem\] {
+    @media (width >= 1200px) {
+      padding-top: 17.5rem;
+    }
+  }
+  .xl\:\!pr-0 {
+    @media (width >= 1200px) {
+      padding-right: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xl\:\!pr-5 {
+    @media (width >= 1200px) {
+      padding-right: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xl\:\!pr-6 {
+    @media (width >= 1200px) {
+      padding-right: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .xl\:\!pr-10 {
+    @media (width >= 1200px) {
+      padding-right: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .xl\:\!pr-14 {
+    @media (width >= 1200px) {
+      padding-right: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .xl\:\!pr-16 {
+    @media (width >= 1200px) {
+      padding-right: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .xl\:\!pr-20 {
+    @media (width >= 1200px) {
+      padding-right: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .xl\:\!pr-28 {
+    @media (width >= 1200px) {
+      padding-right: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .xl\:\!pr-40 {
+    @media (width >= 1200px) {
+      padding-right: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .xl\:\!pr-60 {
+    @media (width >= 1200px) {
+      padding-right: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .xl\:\!pr-\[1\.25rem\] {
+    @media (width >= 1200px) {
+      padding-right: 1.25rem !important;
+    }
+  }
+  .xl\:\!pr-\[2\.5rem\] {
+    @media (width >= 1200px) {
+      padding-right: 2.5rem !important;
+    }
+  }
+  .xl\:\!pr-\[4\.5rem\] {
+    @media (width >= 1200px) {
+      padding-right: 4.5rem !important;
+    }
+  }
+  .xl\:\!pr-\[4rem\] {
+    @media (width >= 1200px) {
+      padding-right: 4rem !important;
+    }
+  }
+  .xl\:\!pb-24 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .xl\:\!pb-40 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .xl\:\!pb-60 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .xl\:\!pb-\[5rem\] {
+    @media (width >= 1200px) {
+      padding-bottom: 5rem !important;
+    }
+  }
+  .xl\:\!pb-\[10rem\] {
+    @media (width >= 1200px) {
+      padding-bottom: 10rem !important;
+    }
+  }
+  .xl\:\!pb-\[12\.5rem\] {
+    @media (width >= 1200px) {
+      padding-bottom: 12.5rem !important;
+    }
+  }
+  .xl\:pb-0 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .xl\:pb-1 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 1);
+    }
+  }
+  .xl\:pb-2 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 2);
+    }
+  }
+  .xl\:pb-6 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 6);
+    }
+  }
+  .xl\:pb-8 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 8);
+    }
+  }
+  .xl\:pb-10 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 10);
+    }
+  }
+  .xl\:pb-12 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 12);
+    }
+  }
+  .xl\:pb-14 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 14);
+    }
+  }
+  .xl\:pb-16 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 16);
+    }
+  }
+  .xl\:pb-20 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 20);
+    }
+  }
+  .xl\:pb-24 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 24);
+    }
+  }
+  .xl\:pb-28 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 28);
+    }
+  }
+  .xl\:pb-32 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 32);
+    }
+  }
+  .xl\:pb-36 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 36);
+    }
+  }
+  .xl\:pb-40 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 40);
+    }
+  }
+  .xl\:pb-60 {
+    @media (width >= 1200px) {
+      padding-bottom: calc(var(--spacing) * 60);
+    }
+  }
+  .xl\:pb-\[3rem\] {
+    @media (width >= 1200px) {
+      padding-bottom: 3rem;
+    }
+  }
+  .xl\:pb-\[4\.5rem\] {
+    @media (width >= 1200px) {
+      padding-bottom: 4.5rem;
+    }
+  }
+  .xl\:pb-\[7rem\] {
+    @media (width >= 1200px) {
+      padding-bottom: 7rem;
+    }
+  }
+  .xl\:pb-\[12\.5rem\] {
+    @media (width >= 1200px) {
+      padding-bottom: 12.5rem;
+    }
+  }
+  .xl\:pb-\[15rem\] {
+    @media (width >= 1200px) {
+      padding-bottom: 15rem;
+    }
+  }
+  .xl\:pb-\[17\.5rem\] {
+    @media (width >= 1200px) {
+      padding-bottom: 17.5rem;
+    }
+  }
+  .xl\:pb-\[22\.5rem\] {
+    @media (width >= 1200px) {
+      padding-bottom: 22.5rem;
+    }
+  }
+  .xl\:\!pl-0 {
+    @media (width >= 1200px) {
+      padding-left: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xl\:\!pl-1 {
+    @media (width >= 1200px) {
+      padding-left: calc(var(--spacing) * 1) !important;
+    }
+  }
+  .xl\:\!pl-5 {
+    @media (width >= 1200px) {
+      padding-left: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xl\:\!pl-6 {
+    @media (width >= 1200px) {
+      padding-left: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .xl\:\!pl-10 {
+    @media (width >= 1200px) {
+      padding-left: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .xl\:\!pl-14 {
+    @media (width >= 1200px) {
+      padding-left: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .xl\:\!pl-20 {
+    @media (width >= 1200px) {
+      padding-left: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .xl\:\!text-left {
+    @media (width >= 1200px) {
+      text-align: left !important;
+    }
+  }
+  .xl\:\!text-right {
+    @media (width >= 1200px) {
+      text-align: right !important;
+    }
+  }
+  .xl\:text-center {
+    @media (width >= 1200px) {
+      text-align: center;
+    }
+  }
+  .xl\:text-left {
+    @media (width >= 1200px) {
+      text-align: left;
+    }
+  }
+  .xl\:text-right {
+    @media (width >= 1200px) {
+      text-align: right;
+    }
+  }
+  .xl\:align-top {
+    @media (width >= 1200px) {
+      vertical-align: top;
+    }
+  }
+  .xl\:\!text-\[\.85rem\] {
+    @media (width >= 1200px) {
+      font-size: .85rem !important;
+    }
+  }
+  .xl\:\!text-\[1\.4rem\] {
+    @media (width >= 1200px) {
+      font-size: 1.4rem !important;
+    }
+  }
+  .xl\:\!text-\[1\.5rem\] {
+    @media (width >= 1200px) {
+      font-size: 1.5rem !important;
+    }
+  }
+  .xl\:\!text-\[1\.6rem\] {
+    @media (width >= 1200px) {
+      font-size: 1.6rem !important;
+    }
+  }
+  .xl\:\!text-\[1\.7rem\] {
+    @media (width >= 1200px) {
+      font-size: 1.7rem !important;
+    }
+  }
+  .xl\:\!text-\[1\.8rem\] {
+    @media (width >= 1200px) {
+      font-size: 1.8rem !important;
+    }
+  }
+  .xl\:\!text-\[1\.9rem\] {
+    @media (width >= 1200px) {
+      font-size: 1.9rem !important;
+    }
+  }
+  .xl\:\!text-\[1\.35rem\] {
+    @media (width >= 1200px) {
+      font-size: 1.35rem !important;
+    }
+  }
+  .xl\:\!text-\[1\.3rem\] {
+    @media (width >= 1200px) {
+      font-size: 1.3rem !important;
+    }
+  }
+  .xl\:\!text-\[2\.1rem\] {
+    @media (width >= 1200px) {
+      font-size: 2.1rem !important;
+    }
+  }
+  .xl\:\!text-\[2\.4rem\] {
+    @media (width >= 1200px) {
+      font-size: 2.4rem !important;
+    }
+  }
+  .xl\:\!text-\[2\.5rem\] {
+    @media (width >= 1200px) {
+      font-size: 2.5rem !important;
+    }
+  }
+  .xl\:\!text-\[2\.6rem\] {
+    @media (width >= 1200px) {
+      font-size: 2.6rem !important;
+    }
+  }
+  .xl\:\!text-\[2\.7rem\] {
+    @media (width >= 1200px) {
+      font-size: 2.7rem !important;
+    }
+  }
+  .xl\:\!text-\[2\.8rem\] {
+    @media (width >= 1200px) {
+      font-size: 2.8rem !important;
+    }
+  }
+  .xl\:\!text-\[2\.9rem\] {
+    @media (width >= 1200px) {
+      font-size: 2.9rem !important;
+    }
+  }
+  .xl\:\!text-\[2\.25rem\] {
+    @media (width >= 1200px) {
+      font-size: 2.25rem !important;
+    }
+  }
+  .xl\:\!text-\[2\.2rem\] {
+    @media (width >= 1200px) {
+      font-size: 2.2rem !important;
+    }
+  }
+  .xl\:\!text-\[2\.3rem\] {
+    @media (width >= 1200px) {
+      font-size: 2.3rem !important;
+    }
+  }
+  .xl\:\!text-\[2rem\] {
+    @media (width >= 1200px) {
+      font-size: 2rem !important;
+    }
+  }
+  .xl\:\!text-\[3\.2rem\] {
+    @media (width >= 1200px) {
+      font-size: 3.2rem !important;
+    }
+  }
+  .xl\:\!text-\[3\.3rem\] {
+    @media (width >= 1200px) {
+      font-size: 3.3rem !important;
+    }
+  }
+  .xl\:\!text-\[3\.4rem\] {
+    @media (width >= 1200px) {
+      font-size: 3.4rem !important;
+    }
+  }
+  .xl\:\!text-\[3\.5rem\] {
+    @media (width >= 1200px) {
+      font-size: 3.5rem !important;
+    }
+  }
+  .xl\:\!text-\[3rem\] {
+    @media (width >= 1200px) {
+      font-size: 3rem !important;
+    }
+  }
+  .xl\:text-\[1\.6rem\] {
+    @media (width >= 1200px) {
+      font-size: 1.6rem;
+    }
+  }
+  .xl\:\[background\:0_0\!important\] {
+    @media (width >= 1200px) {
+      background: 0 0!important;
+    }
+  }
+  .xl\:before\:text-\[1\.6rem\] {
+    @media (width >= 1200px) {
+      &::before {
+        content: var(--tw-content);
+        font-size: 1.6rem;
+      }
+    }
+  }
+  .xxl\:\!mx-8 {
+    @media (width >= 1400px) {
+      margin-inline: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .xxl\:\!mx-12 {
+    @media (width >= 1400px) {
+      margin-inline: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .xxl\:mx-\[-20px\] {
+    @media (width >= 1400px) {
+      margin-inline: -20px;
+    }
+  }
+  .xxl\:\!mt-0 {
+    @media (width >= 1400px) {
+      margin-top: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xxl\:\!mt-8 {
+    @media (width >= 1400px) {
+      margin-top: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .xxl\:\!mt-\[-0\.75rem\] {
+    @media (width >= 1400px) {
+      margin-top: -0.75rem !important;
+    }
+  }
+  .xxl\:\!mt-\[-2\.5rem\] {
+    @media (width >= 1400px) {
+      margin-top: -2.5rem !important;
+    }
+  }
+  .xxl\:\!mt-\[-12\.5rem\] {
+    @media (width >= 1400px) {
+      margin-top: -12.5rem !important;
+    }
+  }
+  .xxl\:\!mr-0 {
+    @media (width >= 1400px) {
+      margin-right: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xxl\:\!mb-5 {
+    @media (width >= 1400px) {
+      margin-bottom: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xxl\:\!mb-\[-15rem\] {
+    @media (width >= 1400px) {
+      margin-bottom: -15rem !important;
+    }
+  }
+  .xxl\:\!ml-\[8\.33333333\%\] {
+    @media (width >= 1400px) {
+      margin-left: 8.33333333% !important;
+    }
+  }
+  .xxl\:\!ml-\[16\.66666667\%\] {
+    @media (width >= 1400px) {
+      margin-left: 16.66666667% !important;
+    }
+  }
+  .xxl\:\!ml-\[50\%\] {
+    @media (width >= 1400px) {
+      margin-left: 50% !important;
+    }
+  }
+  .xxl\:\!flex {
+    @media (width >= 1400px) {
+      display: flex !important;
+    }
+  }
+  .xxl\:w-4\/12 {
+    @media (width >= 1400px) {
+      width: calc(4/12 * 100%);
+    }
+  }
+  .xxl\:w-5\/12 {
+    @media (width >= 1400px) {
+      width: calc(5/12 * 100%);
+    }
+  }
+  .xxl\:w-6\/12 {
+    @media (width >= 1400px) {
+      width: calc(6/12 * 100%);
+    }
+  }
+  .xxl\:w-7\/12 {
+    @media (width >= 1400px) {
+      width: calc(7/12 * 100%);
+    }
+  }
+  .xxl\:w-8\/12 {
+    @media (width >= 1400px) {
+      width: calc(8/12 * 100%);
+    }
+  }
+  .xxl\:w-9\/12 {
+    @media (width >= 1400px) {
+      width: calc(9/12 * 100%);
+    }
+  }
+  .xxl\:w-10\/12 {
+    @media (width >= 1400px) {
+      width: calc(10/12 * 100%);
+    }
+  }
+  .xxl\:w-11\/12 {
+    @media (width >= 1400px) {
+      width: calc(11/12 * 100%);
+    }
+  }
+  .xxl\:\!items-center {
+    @media (width >= 1400px) {
+      align-items: center !important;
+    }
+  }
+  .xxl\:\!rounded-\[\.8rem\] {
+    @media (width >= 1400px) {
+      border-radius: .8rem !important;
+    }
+  }
+  .xxl\:rounded-\[\.8rem\] {
+    @media (width >= 1400px) {
+      border-radius: .8rem;
+    }
+  }
+  .xxl\:\!px-0 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xxl\:\!px-2 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .xxl\:\!px-3 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .xxl\:\!px-4 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .xxl\:\!px-5 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xxl\:\!px-6 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .xxl\:\!px-8 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .xxl\:\!px-10 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .xxl\:\!px-16 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .xxl\:\!px-20 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .xxl\:\!px-24 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .xxl\:\!px-32 {
+    @media (width >= 1400px) {
+      padding-inline: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .xxl\:\!px-\[\.5rem\] {
+    @media (width >= 1400px) {
+      padding-inline: .5rem !important;
+    }
+  }
+  .xxl\:\!px-\[\.75rem\] {
+    @media (width >= 1400px) {
+      padding-inline: .75rem !important;
+    }
+  }
+  .xxl\:\!px-\[1\.5rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 1.5rem !important;
+    }
+  }
+  .xxl\:\!px-\[1\.25rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 1.25rem !important;
+    }
+  }
+  .xxl\:\!px-\[1\.75rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 1.75rem !important;
+    }
+  }
+  .xxl\:\!px-\[2\.5rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 2.5rem !important;
+    }
+  }
+  .xxl\:\!px-\[3\.5rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 3.5rem !important;
+    }
+  }
+  .xxl\:\!px-\[3rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 3rem !important;
+    }
+  }
+  .xxl\:\!px-\[4\.5rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 4.5rem !important;
+    }
+  }
+  .xxl\:\!px-\[20px\] {
+    @media (width >= 1400px) {
+      padding-inline: 20px !important;
+    }
+  }
+  .xxl\:\!px-\[2rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 2rem !important;
+    }
+  }
+  .xxl\:\!px-\[4rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 4rem !important;
+    }
+  }
+  .xxl\:\!px-\[5rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 5rem !important;
+    }
+  }
+  .xxl\:\!px-\[6rem\] {
+    @media (width >= 1400px) {
+      padding-inline: 6rem !important;
+    }
+  }
+  .xxl\:\!py-24 {
+    @media (width >= 1400px) {
+      padding-block: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .xxl\:\!py-40 {
+    @media (width >= 1400px) {
+      padding-block: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .xxl\:\!py-60 {
+    @media (width >= 1400px) {
+      padding-block: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .xxl\:\!pt-10 {
+    @media (width >= 1400px) {
+      padding-top: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .xxl\:\!pr-0 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .xxl\:\!pr-2 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .xxl\:\!pr-5 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xxl\:\!pr-6 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .xxl\:\!pr-8 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .xxl\:\!pr-10 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .xxl\:\!pr-12 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .xxl\:\!pr-14 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .xxl\:\!pr-20 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .xxl\:\!pr-24 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .xxl\:\!pr-28 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .xxl\:\!pr-32 {
+    @media (width >= 1400px) {
+      padding-right: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .xxl\:\!pr-\[1\.25rem\] {
+    @media (width >= 1400px) {
+      padding-right: 1.25rem !important;
+    }
+  }
+  .xxl\:\!pr-\[5rem\] {
+    @media (width >= 1400px) {
+      padding-right: 5rem !important;
+    }
+  }
+  .xxl\:\!pr-\[8rem\] {
+    @media (width >= 1400px) {
+      padding-right: 8rem !important;
+    }
+  }
+  .xxl\:\!pr-\[22\.5rem\] {
+    @media (width >= 1400px) {
+      padding-right: 22.5rem !important;
+    }
+  }
+  .xxl\:pb-0 {
+    @media (width >= 1400px) {
+      padding-bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .xxl\:pb-40 {
+    @media (width >= 1400px) {
+      padding-bottom: calc(var(--spacing) * 40);
+    }
+  }
+  .xxl\:\!pl-5 {
+    @media (width >= 1400px) {
+      padding-left: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .xxl\:\!pl-10 {
+    @media (width >= 1400px) {
+      padding-left: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .xxl\:\!pl-14 {
+    @media (width >= 1400px) {
+      padding-left: calc(var(--spacing) * 14) !important;
+    }
+  }
+}
+:root {
+  font-size: 20px;
+}
+*,::after,::before {
+  box-sizing: border-box;
+}
+hr.dark {
+  color: rgba(164,174,198,0.25);
+}
+::selection {
+  background-color: rgba(63,120,224,.7);
+  color: var(--color-white);
+}
+a {
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+a:focus {
+  outline: 0;
+}
+a[href^=tel] {
+  color: inherit;
+  text-decoration: inherit;
+}
+a.hover {
+  position: relative;
+  &::before {
+    content: var(--tw-content);
+    pointer-events: none;
+  }
+  &::before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::before {
+    content: var(--tw-content);
+    top: 100%;
+  }
+  &::before {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 0);
+  }
+  &::before {
+    content: var(--tw-content);
+    height: 1px;
+  }
+  &::before {
+    content: var(--tw-content);
+    width: 100%;
+  }
+  &::before {
+    content: var(--tw-content);
+    transform-origin: 100% 50%;
+  }
+  &::before {
+    content: var(--tw-content);
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-duration: 0.3s;
+    transition-duration: 0.3s;
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-ease: cubic-bezier(.7,0,0.2,1);
+    transition-timing-function: cubic-bezier(.7,0,0.2,1);
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  &:hover {
+    @media (hover: hover) {
+      &::before {
+        content: var(--tw-content);
+        transform-origin: 0 50%;
+      }
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      &::before {
+        content: var(--tw-content);
+        --tw-ease: cubic-bezier(.4,1,0.8,1);
+        transition-timing-function: cubic-bezier(.4,1,0.8,1);
+      }
+    }
+  }
+}
+a.hover::before {
+  background-color: currentColor;
+}
+a.hover::before {
+  transform: scale3d(0,1,1);
+}
+a.hover:hover:before {
+  transform: scale3d(1,1,1);
+}
+.link-inverse {
+  color: #cacaca;
+}
+.link-inverse,.text-inverse,.text-inverse a:not(.btn) {
+  color: var(--color-white);
+}
+.bg-dark.link-inverse,.bg-dark.text-inverse,.bg-dark.text-inverse .post-meta,.bg-dark.text-inverse a:not(.btn):not([class*=link-]),.bg-navy.link-inverse,.bg-navy.text-inverse,.bg-navy.text-inverse .post-meta,.bg-navy.text-inverse a:not(.btn):not([class*=link-]),[class*=offcanvas-].text-inverse a:not(.btn):not([class*=link-]) {
+  color: #cacaca;
+}
+.badge.bg-light {
+  background-color: rgba(164,174,198,.2) !important;
+}
+.position-absolute {
+  position: absolute !important;
+}
+.more {
+  display: inline-block;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  --tw-tracking: -0.01rem;
+  letter-spacing: -0.01rem;
+  &::after {
+    content: var(--tw-content);
+    margin-right: -0.25rem;
+  }
+  &::after {
+    content: var(--tw-content);
+    display: inline-block;
+  }
+  &::after {
+    content: var(--tw-content);
+    padding-left: 0.05rem;
+  }
+  &::after {
+    content: var(--tw-content);
+    font-size: 0.9rem;
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "\e94c";
+    content: var(--tw-content);
+  }
+}
+.more:after {
+  vertical-align: -3px;
+  font-family: var(--font-Unicons);
+}
+hr.double {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 0px;
+  --tw-border-style: double;
+  border-style: double;
+  border-color: rgba(164,174,198,0.2);
+  background-color: inherit;
+}
+_:default:not(:root:root),hr.double {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 3px;
+}
+.divider-icon {
+  position: relative;
+  margin: 4.5rem 0;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  &::before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::before {
+    content: var(--tw-content);
+    top: calc(2/4 * 100%);
+  }
+  &::before {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 0);
+  }
+  &::before {
+    content: var(--tw-content);
+    width: calc(50% - 1.5rem);
+  }
+  &::before {
+    content: var(--tw-content);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  &::before {
+    content: var(--tw-content);
+    border-top-color: rgba(164,174,198,0.2);
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  &::after {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::after {
+    content: var(--tw-content);
+    top: calc(2/4 * 100%);
+  }
+  &::after {
+    content: var(--tw-content);
+    right: calc(var(--spacing) * 0);
+  }
+  &::after {
+    content: var(--tw-content);
+    width: calc(50% - 1.5rem);
+  }
+  &::after {
+    content: var(--tw-content);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  &::after {
+    content: var(--tw-content);
+    border-top-color: rgba(164,174,198,0.2);
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+}
+.divider-icon i {
+  position: absolute;
+  top: calc(2/4 * 100%);
+  left: calc(2/4 * 100%);
+  --tw-translate-x: calc(calc(2/4 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  font-size: 1.2rem;
+  color: rgba(164,174,198,0.2);
+}
+.divider:after {
+  margin-top: -5px;
+  display: block;
+  height: 5px;
+  width: 100%;
+  background-color: currentColor;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.divider.divider-alt:after {
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: -5px;
+}
+[class*=divider-v-] {
+  position: relative;
+  height: 100%;
+  width: auto;
+  overflow: hidden;
+}
+[class*=divider-v-]>svg {
+  position: absolute;
+  height: 100%;
+  width: auto;
+  scale: 1.2;
+}
+[class*=divider-v-]:after {
+  display: none;
+}
+[class*=divider-v-].divider-v-start>svg {
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+}
+[class*=divider-v-].divider-v-end>svg {
+  top: calc(var(--spacing) * 0);
+  right: calc(var(--spacing) * 0);
+}
+.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: calc(var(--spacing) * 2);
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  --tw-tracking: -0.01rem;
+  letter-spacing: -0.01rem;
+  color: #343f52;
+  word-spacing: .1rem;
+}
+.h1,h1 {
+  --tw-leading: 1.3;
+  line-height: 1.3;
+}
+.h2,h2 {
+  --tw-leading: 1.35;
+  line-height: 1.35;
+}
+.h3,h3 {
+  --tw-leading: 1.4 !important;
+  line-height: 1.4 !important;
+}
+.h4,h4 {
+  --tw-leading: 1.45 !important;
+  line-height: 1.45 !important;
+}
+.h5,h5 {
+  --tw-leading: var(--leading-normal) !important;
+  line-height: var(--leading-normal) !important;
+}
+.h6,h6 {
+  --tw-leading: 1.55 !important;
+  line-height: 1.55 !important;
+}
+body,html {
+  height: 100%;
+}
+body {
+  display: flex;
+  flex-direction: column;
+}
+body {
+  margin: calc(var(--spacing) * 0);
+  background-color: #fefefe;
+  font-family: var(--font-Manrope);
+  font-size: 0.8rem;
+  --tw-leading: 1.7;
+  line-height: 1.7;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  color: #60697b;
+}
+body {
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  word-spacing: .05rem;
+}
+hr {
+  margin-inline: calc(var(--spacing) * 0);
+  margin-block: 4.5rem;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  color: rgba(164,174,198,0.2);
+  opacity: 100%;
+}
+.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: calc(var(--spacing) * 2);
+  --tw-leading: 1.2;
+  line-height: 1.2;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  --tw-tracking: -0.01rem;
+  letter-spacing: -0.01rem;
+  color: #343f52;
+  word-spacing: 0.1rem;
+}
+.h1,h1 {
+  font-size: calc(1.27rem + 0.24vw);
+  @media (width >= 1200px) {
+    font-size: 1.45rem;
+  }
+}
+.h2,h2 {
+  font-size: calc(1.255rem + 0.06vw);
+  @media (width >= 1200px) {
+    font-size: 1.3rem;
+  }
+}
+.h3,h3 {
+  font-size: 1.1rem;
+}
+.h4,h4 {
+  font-size: 0.95rem;
+}
+.h5,h5 {
+  font-size: 0.9rem;
+}
+.h6,h6 {
+  font-size: 0.85rem;
+}
+p {
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: calc(var(--spacing) * 4);
+}
+dl,ol,ul {
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: calc(var(--spacing) * 4);
+}
+ol ol,ol ul,ul ol,ul ul {
+  margin-bottom: calc(var(--spacing) * 0);
+}
+dt {
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+}
+dd {
+  margin-bottom: calc(var(--spacing) * 2);
+  margin-left: calc(var(--spacing) * 0);
+}
+.small,small {
+  font-size: 0.6rem;
+}
+.mark,mark {
+  background-color: #fef1de;
+  padding-inline: 0.4rem;
+  padding-top: 0.05rem;
+  padding-bottom: 0.2rem;
+}
+a {
+  color: rgba(63,120,224,1);
+  text-decoration-line: none;
+}
+a:hover {
+  color: #3f78e0;
+}
+a:not([href]):not([class]),a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration-line: none;
+}
+code,kbd,pre,samp {
+  font-family: var(--font-Monospace);
+  font-size: 1em;
+}
+pre {
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: calc(var(--spacing) * 4);
+  display: block;
+  overflow: auto;
+  font-size: 0.65rem;
+  color: #273444;
+}
+pre code {
+  overflow-wrap: normal;
+  word-break: normal;
+  color: inherit;
+  color: inherit;
+}
+code {
+  font-size: 0.65rem;
+  color: #60697b;
+  word-wrap: break-word;
+}
+a>code {
+  color: inherit;
+}
+kbd {
+  border-radius: 0.2rem;
+  background-color: #60697b;
+  padding-inline: calc(var(--spacing) * 1.5);
+  padding-block: 0.1875rem;
+  font-size: 0.65rem;
+  color: #60697b;
+}
+kbd kbd {
+  padding: calc(var(--spacing) * 0);
+  font-size: 1em;
+}
+figure {
+  margin-inline: calc(var(--spacing) * 0);
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: calc(var(--spacing) * 4);
+}
+img,svg {
+  vertical-align: middle;
+}
+img {
+  max-width: inherit;
+}
+table {
+  border-collapse: collapse;
+  caption-side: bottom;
+}
+caption {
+  padding-block: 0.9rem;
+  text-align: left;
+  color: #aab0bc;
+}
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+tbody,td,tfoot,th,thead,tr {
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: inherit;
+}
+label {
+  display: inline-block;
+}
+button {
+  border-radius: 0;
+}
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+button,input,optgroup,select,textarea {
+  margin: calc(var(--spacing) * 0);
+  --tw-leading: inherit;
+  line-height: inherit;
+  color: inherit;
+  font-family: inherit;
+}
+button,select {
+  text-transform: none;
+}
+[role=button] {
+  cursor: pointer;
+}
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 100%;
+}
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none;
+}
+[type=button],[type=reset],[type=submit],button {
+  -webkit-appearance: button;
+}
+[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled) {
+  cursor: pointer;
+}
+::-moz-focus-inner {
+  --tw-border-style: none;
+  border-style: none;
+  padding: calc(var(--spacing) * 0);
+}
+textarea {
+  resize: vertical;
+  &:focus-visible {
+    outline-style: var(--tw-outline-style) !important;
+    outline-width: 0px !important;
+  }
+}
+input {
+  &:focus-visible {
+    outline-style: var(--tw-outline-style) !important;
+    outline-width: 0px !important;
+  }
+}
+fieldset {
+  margin: calc(var(--spacing) * 0);
+  min-width: calc(var(--spacing) * 0);
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  padding: calc(var(--spacing) * 0);
+}
+legend {
+  float: left;
+  margin-bottom: calc(var(--spacing) * 2);
+  width: 100%;
+  padding: calc(var(--spacing) * 0);
+  font-size: calc(1.275rem + 0.3vw);
+  --tw-leading: inherit;
+  line-height: inherit;
+  @media (width >= 1200px) {
+    font-size: 24px;
+  }
+}
+legend+* {
+  clear: left;
+}
+::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field {
+  padding: calc(var(--spacing) * 0);
+}
+::-webkit-inner-spin-button {
+  height: auto;
+}
+[type=search] {
+  outline-offset: calc(2px * -1);
+  -webkit-appearance: textfield;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-color-swatch-wrapper {
+  padding: calc(var(--spacing) * 0);
+}
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+output {
+  display: inline-block;
+}
+iframe {
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+}
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+progress {
+  vertical-align: baseline;
+}
+[hidden] {
+  display: none;
+}
+.blockquote {
+  margin-bottom: calc(var(--spacing) * 4);
+  font-size: 0.85rem;
+}
+.blockquote>:last-child {
+  margin-bottom: calc(var(--spacing) * 0);
+}
+.figure {
+  display: inline-block;
+}
+.table {
+  margin-bottom: calc(var(--spacing) * 4);
+  width: 100%;
+  border-color: #edeff3;
+  background-color: transparent;
+  vertical-align: top;
+  color: #60697b;
+}
+.table>:not(caption)>*>* {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  background-color: transparent;
+  padding: 0.9rem;
+  color: #60697b;
+}
+.table>tbody {
+  vertical-align: inherit;
+}
+.table>thead {
+  vertical-align: bottom;
+}
+.table-bordered>:not(caption)>* {
+  border-width: 1px 0;
+}
+.table-bordered>:not(caption)>*>* {
+  border-width: 0 1px;
+}
+.table-borderless>:not(caption)>*>* {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 0px;
+}
+.table-borderless>:not(:first-child) {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 0px;
+}
+.table-striped>tbody>tr:nth-of-type(odd)>* {
+  background-color: rgba(164,174,198,0.07);
+  color: #60697b;
+}
+.table-hover>tbody>tr:hover>* {
+  background-color: rgba(164,174,198,0.07);
+  color: #60697b;
+}
+.table-dark {
+  border-color: #3c4047;
+  background-color: #262b32;
+  color: var(--color-white);
+}
+.table-dark>:not(caption)>*>* {
+  color: var(--color-white) !important;
+}
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.form-control[type=file] {
+  overflow: hidden;
+}
+.form-control[type=file]:not(:disabled):not([readonly]) {
+  cursor: pointer;
+}
+.form-control::-webkit-date-and-time-value {
+  margin: calc(var(--spacing) * 0);
+  height: 1.7em;
+  min-width: 85px;
+}
+.form-control::-webkit-datetime-edit {
+  display: block;
+  padding: calc(var(--spacing) * 0);
+}
+.form-control::file-selector-button {
+  -webkit-margin-end: 1rem;
+  margin-inline-end: 1rem;
+  border-inline-end-width: 1px;
+}
+.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
+  background-color: #aab0bc;
+}
+.form-control-sm::file-selector-button {
+  -webkit-margin-end: .6rem;
+  margin-inline-end: .6rem;
+}
+textarea.form-control {
+  min-height: calc(1.7em + 1.2rem + 2px);
+}
+textarea.form-control-sm {
+  min-height: calc(1.7em + 0.8rem + 2px);
+}
+.form-select {
+  display: block;
+  width: 100%;
+  appearance: none;
+  border-radius: 0.4rem;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: rgba(8,60,130,0.07);
+  background-color: #fefefe;
+  background-image: var(--form-select-bg-img),var(--form-select-bg-icon,none);
+  background-position: right 0.75rem center;
+  background-repeat: no-repeat;
+  padding-block: 0.6rem;
+  padding-right: calc(var(--spacing) * 8);
+  padding-left: calc(var(--spacing) * 4);
+  font-size: .75rem;
+  --tw-leading: 1.7;
+  line-height: 1.7;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  color: #959ca9;
+  --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  &:focus {
+    border-color: rgba(8,60,130,0.1);
+  }
+  &:focus {
+    --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04)), unset;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  &:disabled {
+    background-color: #aab0bc;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+  --form-select-bg-img: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2360697b' d='M22.667 12.227c-0.241-0.24-0.573-0.388-0.94-0.388s-0.699 0.148-0.94 0.388l0-0-4.787 4.72-4.72-4.72c-0.241-0.24-0.573-0.388-0.94-0.388s-0.699 0.148-0.94 0.388l0-0c-0.244 0.242-0.394 0.577-0.394 0.947s0.151 0.705 0.394 0.947l5.653 5.653c0.242 0.244 0.577 0.394 0.947 0.394s0.705-0.151 0.947-0.394l0-0 5.72-5.653c0.244-0.242 0.394-0.577 0.394-0.947s-0.151-0.705-0.394-0.947l-0-0z'%3E%3C/path%3E%3C/svg%3E");
+  background-size: 20px 20px;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+.form-select:focus {
+  outline: 0;
+}
+.form-select[multiple],.form-select[size]:not([size="1"]) {
+  background-image: none;
+  padding-right: calc(var(--spacing) * 4);
+}
+.form-select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #959ca9;
+}
+.form-select-sm {
+  border-radius: 0.4rem;
+  padding-block: 0.4rem;
+  padding-left: 0.6rem;
+  font-size: 0.7rem;
+}
+[data-bs-theme=dark] .form-select {
+  --form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cacaca' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+}
+.form-check .form-check-input {
+  float: left;
+  margin-left: -1.55rem;
+}
+.form-check-input {
+  margin-top: 0.325rem;
+  height: 1.05rem;
+  width: 1.05rem;
+  appearance: none;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: rgba(8,60,130,0.1);
+  background-color: #fefefe;
+  background-image: var(--form-check-bg-image);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  vertical-align: top;
+  &:checked {
+    border-color: #3f78e0;
+  }
+  &:checked {
+    background-color: #3f78e0;
+  }
+  &:focus {
+    border-color: rgba(8,60,130,0.1);
+  }
+  &:focus {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  &:active {
+    --tw-brightness: brightness(90%);
+    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,);
+  }
+  &:disabled {
+    pointer-events: none;
+  }
+  &:disabled {
+    opacity: 50%;
+  }
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  print-color-adjust: exact;
+}
+.form-check-input[type=checkbox] {
+  border-radius: 0.25em;
+}
+.form-check-input[type=radio] {
+  border-radius: 50%;
+}
+.form-check-input:focus {
+  outline: 0;
+}
+.form-check-input:checked[type=checkbox] {
+  --form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+}
+.form-check-input:checked[type=radio] {
+  --form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.5' fill='%23fff'/%3e%3c/svg%3e");
+}
+.form-check-input[type=checkbox]:indeterminate {
+  border-color: #3f78e0;
+  background-color: #3f78e0;
+  --form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+}
+.form-check-input:disabled {
+  filter: none;
+}
+.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label {
+  cursor: default;
+  opacity: 50%;
+}
+.form-floating>label {
+  transition: opacity .1s ease-in-out,transform .1s ease-in-out;
+}
+.form-floating>.form-control::-moz-placeholder {
+  color: transparent;
+}
+.form-floating>.form-control::placeholder {
+  color: transparent;
+}
+.form-floating>.form-control:not(:-moz-placeholder-shown) {
+  padding-top: calc(var(--spacing) * 4);
+  padding-bottom: 0.2rem;
+}
+.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown) {
+  padding-top: calc(var(--spacing) * 4);
+  padding-bottom: 0.2rem;
+}
+.form-floating>.form-control:-webkit-autofill {
+  padding-top: calc(var(--spacing) * 4);
+  padding-bottom: 0.2rem;
+}
+.form-floating>.form-select {
+  padding-top: calc(var(--spacing) * 4);
+  padding-bottom: 0.2rem;
+}
+.form-floating>.form-control:not(:-moz-placeholder-shown)~label {
+  --tw-translate-x: 0.2rem;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  --tw-translate-y: -0.4rem;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  scale: 0.8;
+  color: rgba(96,105,123,1);
+}
+.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label {
+  --tw-translate-x: 0.2rem;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  --tw-translate-y: -0.4rem;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  scale: 0.8;
+  color: rgba(96,105,123,1);
+}
+.form-floating>.form-control:not(:-moz-placeholder-shown)~label::after {
+  position: absolute;
+  inset: 0.6rem 0.5rem;
+  z-index: -1;
+  height: 1.5em;
+  border-radius: 0.4rem;
+  background-color: #fefefe;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.form-floating>.form-control:focus~label::after,.form-floating>.form-control:not(:placeholder-shown)~label::after,.form-floating>.form-select~label::after {
+  position: absolute;
+  inset: 0.6rem 0.5rem;
+  z-index: -1;
+  height: 1.5em;
+  border-radius: 0.4rem;
+  background-color: #fefefe;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.form-floating>.form-control:-webkit-autofill~label {
+  --tw-translate-x: 0.2rem;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  --tw-translate-y: -0.4rem;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  scale: 0.8;
+  color: rgba(96,105,123,1);
+}
+.form-floating>.form-control:disabled~label,.form-floating>:disabled~label {
+  color: #60697b;
+}
+.form-floating>.form-control:disabled~label::after,.form-floating>:disabled~label::after {
+  background-color: #aab0bc;
+}
+.input-group {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+.input-group>.form-control,.input-group>.form-floating,.input-group>.form-select {
+  position: relative;
+  width: 1%;
+  min-width: calc(var(--spacing) * 0);
+  flex: auto;
+}
+.input-group>.form-control:focus,.input-group>.form-floating:focus-within,.input-group>.form-select:focus {
+  z-index: 5;
+}
+.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select {
+  border-radius: 0.4rem;
+  padding-inline: 1.4rem;
+  padding-block: 0.65rem;
+  font-size: 0.85rem;
+}
+.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+  margin-left: calc(1px * -1);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.valid-feedback {
+  margin-top: calc(var(--spacing) * 1);
+  display: none;
+  width: 100%;
+  font-size: 0.7rem;
+  color: #198754;
+}
+.valid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  margin-top: 0.1rem;
+  display: none;
+  max-width: 100%;
+  border-radius: 0.4rem;
+  background-color: #45c4a0;
+  padding-inline: calc(var(--spacing) * 3);
+  padding-block: calc(var(--spacing) * 2);
+  font-size: 0.8rem;
+  color: var(--color-white);
+}
+.is-valid~.valid-feedback,.is-valid~.valid-tooltip {
+  display: block;
+}
+.form-control.is-valid {
+  border-color: #198754;
+  background-image: url("data:image/svg+xml,%3Csvg_xmlns='http://www.w3.org/2000/svg'_viewBox='0_0_24_24'%3E%3Cpath_fill='%23198754'_d='M14.72,8.79l-4.29,4.3L8.78,11.44a1,1,0,1,0-1.41,1.41l2.35,2.36a1,1,0,0,0,0.71.29,1,1,0,0,0,0.7-0.29l5-5a1,1,0,0,0,0-1.42A1,1,0,0,0,14.72,8.79ZM12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z'/%3E%3C/svg%3E");
+  background-position: calc(.425em + 0.6rem) calc(.425em + 0.6rem);
+  background-position: right calc(.425em + 0.3rem) center;
+  background-repeat: no-repeat;
+  padding-right: calc(1.7em + 1.2rem);
+}
+.form-control.is-valid:focus {
+  border-color: #198754;
+  --tw-shadow: 0 0 0 0.25rem var(--tw-shadow-color, rgba(69,196,160,0.25));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+textarea.form-control.is-valid {
+  background-position: top calc(.425em + 0.3rem) right calc(.425em + 0.3rem);
+  padding-right: calc(1.7em + 1.2rem);
+}
+.form-select.is-valid {
+  border-color: #198754;
+}
+.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"] {
+  background-color: right 0.75rem center,center right 2rem;
+  background-position: 20px 20px,calc(.425em + 0.6rem) calc(.425em + 0.6rem);
+  padding-right: 4.5rem;
+  --form-select-bg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23198754' d='M14.72,8.79l-4.29,4.3L8.78,11.44a1,1,0,1,0-1.41,1.41l2.35,2.36a1,1,0,0,0,.71.29,1,1,0,0,0,.7-.29l5-5a1,1,0,0,0,0-1.42A1,1,0,0,0,14.72,8.79ZM12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z'/%3E%3C/svg%3E");
+}
+.form-select.is-valid:focus {
+  border-color: #198754;
+  --tw-shadow: 0 0 0 0.25rem var(--tw-shadow-color, rgba(69,196,160,0.25));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.form-check-input.is-valid {
+  border-color: #198754;
+}
+.form-check-input.is-valid:checked {
+  background-color: #198754;
+}
+.form-check-input.is-valid:focus {
+  --tw-shadow: 0 0 0 0.25rem var(--tw-shadow-color, rgba(69,196,160,0.25));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.form-check-input.is-valid~.form-check-label {
+  color: #198754;
+}
+.input-group>.form-control:not(:focus).is-valid,.input-group>.form-floating:not(:focus-within).is-valid,.input-group>.form-select:not(:focus).is-valid {
+  z-index: 3;
+}
+.invalid-feedback {
+  margin-top: calc(var(--spacing) * 1);
+  display: none;
+  width: 100%;
+  font-size: 0.7rem;
+  color: #dc3545;
+}
+.invalid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  margin-top: 0.1rem;
+  display: none;
+  max-width: 100%;
+  border-radius: 0.4rem;
+  background-color: #e2626b;
+  padding-inline: calc(var(--spacing) * 3);
+  padding-block: calc(var(--spacing) * 2);
+  font-size: 0.8rem;
+  color: var(--color-white);
+}
+.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip {
+  display: block;
+}
+.form-control.is-invalid {
+  border-color: #dc3545;
+  background-image: url("data:image/svg+xml,%3csvg_xmlns='http://www.w3.org/2000/svg'_viewBox='0_0_12_12'_width='12'_height='12'_fill='none'_stroke='%23dc3545'%3e%3ccircle_cx='6'_cy='6'_r='4.5'/%3e%3cpath_stroke-linejoin='round'_d='M5.8_3.6h.4L6_6.5z'/%3e%3ccircle_cx='6'_cy='8.2'_r='.6'_fill='%23dc3545'_stroke='none'/%3e%3c/svg%3e");
+  background-position: calc(.425em + 0.6rem) calc(.425em + 0.6rem);
+  background-position: right calc(.425em + 0.3rem) center;
+  background-repeat: no-repeat;
+  padding-right: calc(1.7em + 1.2rem);
+}
+.form-control.is-invalid:focus {
+  border-color: #dc3545;
+  --tw-shadow: 0 0 0 0.25rem var(--tw-shadow-color, rgba(226,98,107,0.25));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+textarea.form-control.is-invalid {
+  background-position: top calc(.425em + 0.3rem) right calc(.425em + 0.3rem);
+  padding-right: calc(1.7em + 1.2rem);
+}
+.form-select.is-invalid {
+  border-color: #dc3545;
+}
+.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"] {
+  background-color: right 0.75rem center,center right 2rem;
+  background-position: 20px 20px,calc(.425em + 0.6rem) calc(.425em + 0.6rem);
+  padding-right: 4.5rem;
+  --form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+}
+.form-select.is-invalid:focus {
+  border-color: #dc3545;
+  --tw-shadow: 0 0 0 0.25rem var(--tw-shadow-color, rgba(226,98,107,0.25));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.form-check-input.is-invalid {
+  border-color: #dc3545;
+}
+.form-check-input.is-invalid:checked {
+  background-color: #dc3545;
+}
+.form-check-input.is-invalid:focus {
+  --tw-shadow: 0 0 0 0.25rem var(--tw-shadow-color, rgba(226,98,107,0.25));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.form-check-input.is-invalid~.form-check-label {
+  color: #dc3545;
+}
+.input-group>.form-control:not(:focus).is-invalid,.input-group>.form-floating:not(:focus-within).is-invalid,.input-group>.form-select:not(:focus).is-invalid {
+  z-index: 4;
+}
+.btn {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 0.4rem;
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: transparent;
+  background-color: transparent;
+  padding: 0.5rem 1.2rem;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 0.8rem;
+  --tw-leading: 1.7;
+  line-height: 1.7;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+  color: #60697b;
+  --tw-shadow: unset;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  -webkit-user-select: none;
+  user-select: none;
+  &:hover {
+    @media (hover: hover) {
+      border-color: var(--color-white);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--color-white);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: var(--color-white);
+    }
+  }
+  &:focus-visible {
+    border-color: transparent;
+  }
+  &:focus-visible {
+    color: #ffffff;
+  }
+  &:focus-visible {
+    --tw-shadow: unset, 0 0 0 0.25rem var(--tw-shadow-color, rgba(92,140,229,0.5));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.btn:focus-visible {
+  outline: 0;
+}
+.btn-white {
+  border-color: var(--color-white);
+  background-color: var(--color-white);
+  color: #343f52;
+  &:hover {
+    @media (hover: hover) {
+      border-color: var(--color-white);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--color-white);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #343f52;
+    }
+  }
+  &:focus {
+    --tw-shadow-color: rgba(225,226,229,1);
+  }
+  &:active {
+    border-color: var(--color-white);
+  }
+  &:active {
+    background-color: var(--color-white);
+  }
+  &:active {
+    color: #343f52;
+  }
+  &:disabled {
+    border-color: var(--color-white);
+  }
+  &:disabled {
+    background-color: var(--color-white);
+  }
+  &:disabled {
+    color: #343f52;
+  }
+}
+.btn-lg {
+  border-radius: 0.4rem;
+  padding-inline: 1.4rem;
+  padding-block: 0.65rem;
+  font-size: 0.85rem;
+}
+.btn-sm {
+  border-radius: 0.4rem;
+  padding-inline: calc(var(--spacing) * 4);
+  padding-block: 0.4rem;
+  font-size: 0.7rem;
+}
+.fade {
+  transition-property: opacity;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.15s;
+  transition-duration: 0.15s;
+  --tw-ease: linear;
+  transition-timing-function: linear;
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0%;
+}
+.collapse {
+  visibility: visible;
+}
+.collapse:not(.show) {
+  display: none;
+}
+.collapsing {
+  height: calc(var(--spacing) * 0);
+  overflow: hidden;
+  transition-property: height;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.35s;
+  transition-duration: 0.35s;
+  --tw-ease: ease;
+  transition-timing-function: ease;
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.collapsing.collapse-horizontal {
+  height: auto;
+  width: calc(var(--spacing) * 0);
+  transition-property: width;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.35s;
+  transition-duration: 0.35s;
+  --tw-ease: ease;
+  transition-timing-function: ease;
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.dropdown,.dropdown-center,.dropend,.dropstart,.dropup,.dropup-center {
+  position: relative;
+}
+.dropdown-toggle {
+  white-space: nowrap;
+  &::after {
+    content: var(--tw-content);
+    margin-left: 0.05rem;
+  }
+  &::after {
+    content: var(--tw-content);
+    display: inline-block;
+  }
+  &::after {
+    content: var(--tw-content);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  &::after {
+    content: var(--tw-content);
+    vertical-align: -3px;
+  }
+  &::after {
+    content: var(--tw-content);
+    font-family: var(--font-Unicons);
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "\e92d";
+    content: var(--tw-content);
+  }
+  &:empty {
+    &::after {
+      content: var(--tw-content);
+      margin-left: calc(var(--spacing) * 0);
+    }
+  }
+}
+.dropdown-menu {
+  position: absolute;
+  z-index: 1000;
+  margin: calc(var(--spacing) * 0);
+  display: none;
+  min-width: 10rem;
+  list-style-type: none;
+  border-radius: 0.4rem;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: transparent;
+  background-color: var(--color-white);
+  background-clip: padding-box;
+  padding: 1rem 0;
+  text-align: left;
+  font-size: 0.75rem;
+  color: #343f52;
+  --tw-shadow: 0rem 0rem 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.06)) !important;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+}
+.dropdown-menu[data-bs-popper] {
+  top: 100%;
+  left: calc(var(--spacing) * 0);
+  margin-top: 0.75rem;
+}
+.dropdown-menu-start[data-bs-popper] {
+  right: auto;
+  left: calc(var(--spacing) * 0);
+}
+.dropdown-menu-end[data-bs-popper] {
+  right: calc(var(--spacing) * 0);
+  left: auto;
+}
+.dropup .dropdown-menu[data-bs-popper] {
+  top: auto;
+  bottom: 100%;
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: 0.75rem;
+}
+.dropup .dropdown-toggle::after {
+  margin-left: 0.05rem;
+  display: inline-block;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  vertical-align: -3px;
+  font-family: var(--font-Unicons);
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  --tw-content: "\e932";
+  content: var(--tw-content);
+}
+.dropup .dropdown-toggle:empty::after {
+  margin-left: calc(var(--spacing) * 0);
+}
+.dropend .dropdown-menu[data-bs-popper] {
+  top: calc(var(--spacing) * 0);
+  right: auto;
+  left: 100%;
+  margin-top: calc(var(--spacing) * 0);
+  margin-left: 0.75rem;
+}
+.dropend .dropdown-toggle::after {
+  margin-left: 0.05rem;
+  display: inline-block;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  vertical-align: -3px;
+  font-family: var(--font-Unicons);
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  --tw-content: "\e931";
+  content: var(--tw-content);
+}
+.dropend .dropdown-toggle:empty::after {
+  margin-left: calc(var(--spacing) * 0);
+}
+.dropend .dropdown-toggle::after {
+  vertical-align: 0;
+}
+.dropstart .dropdown-menu[data-bs-popper] {
+  top: calc(var(--spacing) * 0);
+  right: 100%;
+  left: auto;
+  margin-top: calc(var(--spacing) * 0);
+  margin-right: 0.75rem;
+}
+.dropstart .dropdown-toggle::after {
+  margin-left: 0.05rem;
+  display: inline-block;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  vertical-align: -3px;
+  font-family: var(--font-Unicons);
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  --tw-content: "\e92f";
+  content: var(--tw-content);
+}
+.dropstart .dropdown-toggle:empty::after {
+  margin-left: calc(var(--spacing) * 0);
+}
+.dropstart .dropdown-toggle::before {
+  vertical-align: 0;
+}
+.dropdown-divider {
+  margin-inline: calc(var(--spacing) * 0);
+  margin-block: 0.5rem;
+  height: calc(var(--spacing) * 0);
+  overflow: hidden;
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-top-color: transparent;
+  opacity: 100%;
+}
+.dropdown-item {
+  clear: both;
+  display: block;
+  width: 100%;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: transparent;
+  padding-top: 0.2rem;
+  padding-right: 1.5rem;
+  padding-bottom: 0.2rem;
+  padding-left: 1.5rem;
+  text-align: inherit;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  color: #343f52;
+}
+.dropdown-item:focus,.dropdown-item:hover {
+  &:hover {
+    @media (hover: hover) {
+      background-color: inherit;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #3f78e0;
+    }
+  }
+  &:focus {
+    background-color: inherit;
+  }
+  &:focus {
+    color: #3f78e0;
+  }
+}
+.dropdown-item.active,.dropdown-item:active {
+  background-color: inherit;
+  color: #3f78e0;
+  text-decoration-line: none;
+}
+.dropdown-item.disabled,.dropdown-item:disabled {
+  pointer-events: none;
+  background-color: transparent;
+  color: #60697b;
+}
+.dropdown-menu.show {
+  display: block;
+}
+.dropdown-header {
+  margin-bottom: calc(var(--spacing) * 0);
+  display: block;
+  padding-top: 0.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1.5rem;
+  font-size: 0.7rem;
+  white-space: nowrap;
+  color: #3f78e0;
+}
+.btn-group>.btn {
+  position: relative;
+  flex: auto;
+}
+.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover {
+  z-index: 1;
+}
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.btn-toolbar .input-group {
+  width: auto;
+}
+.btn-group {
+  border-radius: 0.4rem;
+}
+.btn-group>.btn-group:not(:first-child) {
+  margin-left: calc(2px * -1);
+}
+.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n+3) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.dropdown-toggle-split {
+  padding-inline: 0.9rem;
+  &::after {
+    content: var(--tw-content);
+    margin-left: calc(var(--spacing) * 0);
+  }
+}
+.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after {
+  margin-left: calc(var(--spacing) * 0);
+}
+.dropstart .dropdown-toggle-split::before {
+  margin-right: calc(var(--spacing) * 0);
+}
+.btn-sm+.dropdown-toggle-split {
+  padding-inline: calc(var(--spacing) * 3);
+}
+.btn-lg+.dropdown-toggle-split {
+  padding-inline: 1.05rem;
+}
+.btn-group.show .dropdown-toggle {
+  --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.15));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.nav {
+  margin-bottom: calc(var(--spacing) * 0);
+  display: flex;
+  list-style-type: none;
+  flex-wrap: wrap;
+  padding: calc(var(--spacing) * 0);
+  font-size: 0.8rem;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  color: #343f52;
+}
+.nav-link {
+  display: block;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: inherit;
+  padding: 1.2rem 0;
+  font-size: 0.8rem;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  color: #343f52;
+  transition-property: color;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  &:hover {
+    @media (hover: hover) {
+      color: #3f78e0;
+    }
+  }
+  &:focus {
+    color: #3f78e0;
+  }
+  &:focus-visible {
+    --tw-shadow: 0 0 0 0.25rem var(--tw-shadow-color, rgba(63,120,224,0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.nav-link:focus-visible {
+  outline: 0;
+}
+.nav-link.disabled,.nav-link:disabled {
+  pointer-events: none;
+  cursor: default;
+  color: #959ca9;
+}
+.nav-tabs {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-bottom-color: rgba(164,174,198,0.2);
+}
+.nav-tabs .nav-link {
+  margin-bottom: calc(-1 * 1px);
+  border-top-left-radius: 0.4rem;
+  border-top-right-radius: 0.4rem;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: transparent;
+}
+.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover {
+  isolation: isolate;
+  border-color: transparent;
+}
+.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active {
+  border-color: rgba(164,174,198,0.2);
+  background-color: var(--color-white);
+  color: #3f78e0;
+}
+.nav-tabs .dropdown-menu {
+  margin-top: calc(-1 * 1px);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.nav-pills {
+  border-radius: 0.4rem;
+}
+.nav-pills .nav-link {
+  border-radius: 0.4rem;
+}
+.nav-pills .nav-link.active,.nav-pills .show>.nav-link {
+  background-color: var(--color-white);
+  color: #3f78e0;
+}
+.nav-underline {
+  gap: 1rem;
+}
+.nav-underline .nav-link {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 0.125rem;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-bottom-color: transparent;
+  padding-inline: calc(var(--spacing) * 0);
+}
+.nav-underline .nav-link:focus,.nav-underline .nav-link:hover {
+  border-bottom-color: currentcolor;
+}
+.nav-underline .nav-link.active,.nav-underline .show>.nav-link {
+  border-bottom-color: currentcolor;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  color: #000000;
+}
+.nav-fill .nav-item,.nav-fill>.nav-link {
+  flex: auto;
+  text-align: center;
+}
+.nav-justified .nav-item,.nav-justified>.nav-link {
+  flex-grow: 1;
+  flex-basis: calc(var(--spacing) * 0);
+  text-align: center;
+}
+.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link {
+  width: 100%;
+}
+.tab-content>.tab-pane {
+  display: none;
+}
+.tab-content>.active {
+  display: block;
+}
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--spacing) * 0);
+  color: #343f52;
+}
+.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: inherit;
+}
+.navbar-brand {
+  margin-right: calc(var(--spacing) * 0);
+  padding-block: calc(var(--spacing) * 0);
+  font-size: 0.7rem;
+  white-space: nowrap;
+  color: #3f78e0;
+}
+.navbar-brand:focus,.navbar-brand:hover {
+  color: #3f78e0;
+}
+.navbar-nav {
+  margin-bottom: calc(var(--spacing) * 0);
+  display: flex;
+  list-style-type: none;
+  flex-direction: column;
+  padding: calc(var(--spacing) * 0);
+  font-size: 0.8rem;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  color: #343f52;
+}
+.navbar-nav .nav-link.active,.navbar-nav .nav-link.show {
+  color: #3f78e0;
+}
+.navbar-nav .dropdown-menu {
+  position: static;
+}
+.navbar-collapse {
+  flex-grow: 1;
+  flex-basis: 100%;
+  align-items: center;
+}
+.navbar-toggler {
+  border-radius: 0.4rem;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: transparent;
+  background-color: transparent;
+  padding-inline: 0.75rem;
+  padding-block: 0.25rem;
+  font-size: 1rem;
+  --tw-leading: 1;
+  line-height: 1;
+  color: #343f52;
+  transition-property: box-shadow 0.15s ease-in-out;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  &:hover {
+    @media (hover: hover) {
+      text-decoration-line: none;
+    }
+  }
+  &:focus {
+    text-decoration-line: none;
+  }
+  &:focus {
+    --tw-shadow: 0 0 0 0.25rem var(--tw-shadow-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.navbar-toggler:focus {
+  outline: 0;
+}
+.navbar-dark, .navbar[data-bs-theme=dark] {
+  color: var(--color-white);
+  &:hover {
+    @media (hover: hover) {
+      color: rgba(255,255,255,0.7);
+    }
+  }
+  &:active {
+    color: rgba(255,255,255,0.7);
+  }
+  &:disabled {
+    color: rgba(255,255,255,0.25);
+  }
+}
+.navbar-dark .nav-link {
+  color: var(--color-white);
+  &:hover {
+    @media (hover: hover) {
+      color: rgba(255,255,255,0.7);
+    }
+  }
+  &:focus {
+    color: rgba(255,255,255,0.7);
+  }
+}
+.card {
+  position: relative;
+  display: flex;
+  min-width: calc(var(--spacing) * 0);
+  flex-direction: column;
+  border-radius: 0.4rem;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: rgba(164,174,198,0.2);
+  background-color: #ffffff;
+  background-clip: border-box;
+  color: #60697b;
+  word-wrap: break-word;
+}
+.card>hr {
+  margin-inline: calc(var(--spacing) * 0);
+}
+.card-title {
+  margin-bottom: 0.5rem;
+  color: #343f52;
+}
+.card-link+.card-link {
+  margin-left: 2rem;
+}
+.card-header {
+  margin-bottom: calc(var(--spacing) * 0);
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-bottom-color: rgba(164,174,198,0.2);
+  background-color: transparent;
+  padding-top: 0.9rem;
+  padding-right: 2rem;
+  padding-bottom: 0.9rem;
+  padding-left: 2rem;
+  &:first-child {
+    border-radius: 0.4rem 0.4rem 0 0;
+  }
+}
+.card-footer {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-top-color: rgba(164,174,198,0.2);
+  background-color: transparent;
+  padding-top: 0.9rem;
+  padding-right: 2rem;
+  padding-bottom: 0.9rem;
+  padding-left: 2rem;
+  &:last-child {
+    border-radius: 0 0 0.4rem 0.4rem;
+  }
+}
+.card-header-tabs {
+  margin-right: calc(-0.5 * 2rem);
+  margin-bottom: calc(-1 * 0.9rem);
+  margin-left: calc(-0.5 * 2rem);
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 0px;
+}
+.card-header-tabs .nav-link.active {
+  border-bottom-color: #ffffff;
+  background-color: #ffffff;
+}
+.card-header-pills {
+  margin-right: calc(-0.5 * 2rem);
+  margin-left: calc(-0.5 * 2rem);
+}
+.card-img,.card-img-bottom,.card-img-top {
+  width: 100%;
+}
+.card-img,.card-img-top {
+  border-top-left-radius: 0.4rem;
+  border-top-right-radius: 0.4rem;
+}
+.card-img,.card-img-bottom {
+  border-bottom-right-radius: 0.4rem;
+  border-bottom-left-radius: 0.4rem;
+}
+.card-group>.card {
+  margin-bottom: 0.75rem;
+}
+.pagination {
+  display: flex;
+  list-style-type: none;
+  padding-left: calc(var(--spacing) * 0);
+}
+.page-link {
+  position: relative;
+  display: block;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: rgba(164,174,198,0.2);
+  background-color: #ffffff;
+  padding: calc(var(--spacing) * 0);
+  font-size: 0.65rem;
+  color: #343f52;
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  &:hover {
+    @media (hover: hover) {
+      z-index: 2;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      border-color: rgba(164,174,198,0.2);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #ffffff;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #3f78e0;
+    }
+  }
+  &:focus {
+    z-index: 3;
+  }
+  &:focus {
+    background-color: #ffffff;
+  }
+  &:focus {
+    color: #3f78e0;
+  }
+  &:focus {
+    --tw-shadow: unset;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.page-link:focus {
+  outline: 0;
+}
+.active>.page-link,.page-link.active {
+  z-index: 3;
+  border-color: rgba(164,174,198,0.2);
+  background-color: #ffffff;
+  color: #3f78e0;
+}
+.disabled>.page-link,.page-link.disabled {
+  pointer-events: none;
+  border-color: rgba(164,174,198,0.2);
+  background-color: #ffffff;
+  color: #959ca9;
+}
+.page-item:not(:first-child) .page-link {
+  margin-left: calc(1px * -1);
+}
+.page-item:first-child .page-link {
+  border-top-left-radius: 0.4rem;
+  border-bottom-left-radius: 0.4rem;
+}
+.page-item:last-child .page-link {
+  border-top-right-radius: 0.4rem;
+  border-bottom-right-radius: 0.4rem;
+}
+.badge {
+  display: inline-block;
+  border-radius: 0.4rem;
+  padding-top: 0.4em;
+  padding-right: 0.7em;
+  padding-bottom: 0.4em;
+  padding-left: 0.7em;
+  text-align: center;
+  vertical-align: baseline;
+  font-size: 0.75em;
+  --tw-leading: 1;
+  line-height: 1;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+  color: var(--color-white);
+  &:empty {
+    display: none;
+  }
+}
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+.alert {
+  position: relative;
+  margin-bottom: 1rem;
+  border-radius: 0.4rem;
+  background-color: transparent;
+  padding: 1rem;
+  color: inherit;
+  border: 0 solid transparent;
+}
+.alert-link {
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  color: inherit;
+}
+.alert-dismissible {
+  padding-right: calc(var(--spacing) * 12);
+}
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  right: calc(var(--spacing) * 0);
+  z-index: 2;
+  padding: 1.05rem 1rem !important;
+}
+.modal {
+  margin: calc(var(--spacing) * 2);
+  width: 560px;
+  padding: calc(var(--spacing) * 10);
+  position: fixed;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  z-index: 1055;
+  display: none;
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+}
+.modal-dialog {
+  pointer-events: none;
+  position: relative;
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+  margin-left: 0.5rem;
+  width: auto;
+}
+.modal.fade .modal-dialog {
+  --tw-translate-x: calc(var(--spacing) * 0);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  --tw-translate-y: -50px;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  transition-property: transform, translate, scale, rotate;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.3s;
+  transition-duration: 0.3s;
+  --tw-ease: ease-out;
+  transition-timing-function: ease-out;
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.modal.show .modal-dialog {
+  transform: none;
+}
+.modal.modal-static .modal-dialog {
+  scale: 1.02;
+}
+.modal-dialog-scrollable {
+  height: calc(100% - 0.5rem * 2);
+}
+.modal-dialog-scrollable .modal-content {
+  max-height: 100%;
+  overflow: hidden;
+}
+.modal-dialog-scrollable .modal-body {
+  overflow-y: auto;
+}
+.modal-dialog-centered {
+  display: flex;
+  min-height: calc(100% - 0.5rem * 2);
+  align-items: center;
+}
+.modal-content {
+  pointer-events: auto;
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  border-radius: 0.4rem;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: 0;
+  border-color: rgba(0,0,0,0.175);
+  background-color: #fefefe;
+  background-clip: padding-box;
+  --tw-shadow: 0rem 0rem 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  outline: 0;
+}
+.modal-backdrop.show {
+  opacity: 100% !important;
+}
+.modal-backdrop.fade {
+  opacity: 0%;
+}
+.modal-backdrop {
+  position: fixed;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  z-index: 1050;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(30,34,40,0.9);
+}
+.offcanvas {
+  visibility: hidden;
+  position: fixed;
+  bottom: calc(var(--spacing) * 0);
+  z-index: 1045;
+  display: flex;
+  max-width: 100%;
+  flex-direction: column;
+  background-color: #1e2228;
+  background-clip: padding-box;
+  color: #ffffff;
+  --tw-shadow: none;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  outline-style: var(--tw-outline-style);
+  outline-width: 0px;
+  transition-property: transform, translate, scale, rotate;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.3s;
+  transition-duration: 0.3s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+  outline: 0;
+}
+.offcanvas.offcanvas-start {
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  width: 15rem;
+  --tw-translate-x: -100%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  --tw-border-style: solid;
+  border-style: solid;
+  border-right-color: 0;
+  border-right-color: transparent;
+}
+.offcanvas.offcanvas-end {
+  top: calc(var(--spacing) * 0);
+  right: calc(var(--spacing) * 0);
+  width: 15rem;
+  --tw-translate-x: 100%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  --tw-border-style: solid;
+  border-style: solid;
+  border-left-color: 0;
+  border-left-color: transparent;
+}
+.offcanvas.offcanvas-top {
+  inset-inline: calc(var(--spacing) * 0);
+  top: calc(var(--spacing) * 0);
+  height: 30vh;
+  max-height: 100%;
+  --tw-translate-y: -100%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  --tw-border-style: solid;
+  border-style: solid;
+  border-bottom-color: 0;
+  border-bottom-color: transparent;
+}
+.offcanvas.offcanvas-bottom {
+  inset-inline: calc(var(--spacing) * 0);
+  height: 30vh;
+  max-height: 100%;
+  --tw-translate-y: 100%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  --tw-border-style: solid;
+  border-style: solid;
+  border-top-color: 0;
+  border-top-color: transparent;
+}
+.offcanvas.show:not(.hiding),.offcanvas.showing {
+  translate: none;
+  transform: none;
+}
+.offcanvas.hiding,.offcanvas.show,.offcanvas.showing {
+  visibility: visible;
+}
+.offcanvas-backdrop {
+  position: fixed;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  z-index: 1040;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(30,34,40,0.7);
+}
+.offcanvas-backdrop.fade {
+  opacity: 0%;
+}
+.offcanvas-backdrop.show {
+  opacity: 100%;
+}
+.offcanvas-body {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding-top: 1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-left: 1.5rem;
+}
+.placeholder {
+  display: inline-block;
+  min-height: 1em;
+  cursor: wait;
+  background-color: currentcolor;
+  vertical-align: middle;
+  opacity: 50%;
+}
+.placeholder.btn::before {
+  display: inline-block;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.placeholder {
+  animation: placeholder-glow 2s ease-in-out infinite;
+}
+@keyframes placeholder-glow {
+  50% {
+    opacity: .2;
+  }
+}
+.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  margin: -1px;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  padding: calc(var(--spacing) * 0);
+  white-space: nowrap;
+  clip: rect(0,0,0,0) !important;
+}
+.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption) {
+  position: absolute;
+}
+.stretched-link::after {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: 1;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.mark,mark {
+  border-radius: 0.4rem;
+  color: inherit;
+}
+.rounded,.rounded img {
+  border-radius: 0.4rem;
+}
+.rounded-xl img,.rounded-xl>.plyr {
+  border-radius: 0.8rem;
+}
+.page-frame footer,.page-frame section {
+  margin-top: calc(var(--spacing) * 5);
+  @media (width >= 768px) {
+    border-radius: var(--radius-2xl);
+  }
+  @media (width >= 768px) {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+}
+figure {
+  margin: calc(var(--spacing) * 0);
+  padding: calc(var(--spacing) * 0);
+}
+figure img {
+  height: auto !important;
+  width: 100%;
+  max-width: 100%;
+}
+.img-mask img {
+  height: auto;
+  width: 100%;
+  max-width: 100%;
+  -webkit-mask-position: center center;
+  mask-position: center center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: auto auto;
+}
+.img-mask.mask-1 img {
+  -webkit-mask-image: url(assets/img/svg/blob.svg);
+  background-image: url(assets/img/svg/blob.svg);
+}
+.img-mask.mask-2 img {
+  -webkit-mask-image: url(assets/img/svg/hex.svg);
+  background-image: url(assets/img/svg/hex.svg);
+}
+.img-mask.mask-3 img {
+  -webkit-mask-image: url(assets/img/svg/blob2.svg);
+  background-image: url(assets/img/svg/blob2.svg);
+}
+.table:not(.table-borderless) tbody {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+}
+.map iframe {
+  display: block;
+}
+[class*=\!mb-],[class*=\!mt-] {
+  position: relative;
+  z-index: 3;
+}
+.mega-menu-scroll,.offcanvas,.scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.mega-menu-scroll::-webkit-scrollbar,.offcanvas::-webkit-scrollbar,.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+blockquote.border-0 {
+  padding-left: calc(var(--spacing) * 0);
+}
+blockquote.text-center.icon-top:before {
+  left: calc(2/4 * 100%);
+  --tw-translate-x: -52%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.filter:not(.basic-filter) ul li a {
+  color: #aab0bc;
+}
+.filter:not(.basic-filter) ul li a.active {
+  color: #3f78e0 !important;
+}
+.filter:not(.basic-filter).dark-filter ul li+li:before {
+  background-color: rgba(255,255,255,.2);
+}
+.filter:not(.basic-filter).dark-filter ul li a.active,.filter:not(.basic-filter).dark-filter ul li a:hover {
+  color: var(--color-white);
+}
+.filter.basic-filter p {
+  margin-block: calc(var(--spacing) * 0);
+  margin-right: calc(var(--spacing) * 4);
+  margin-left: calc(var(--spacing) * 0);
+  display: inline;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  color: #343f52;
+}
+.filter.basic-filter ul {
+  margin: calc(var(--spacing) * 0);
+  display: inline;
+  list-style-type: none;
+  padding: calc(var(--spacing) * 0);
+}
+.filter.basic-filter ul li {
+  margin-right: calc(var(--spacing) * 4);
+  display: inline;
+}
+.filter.basic-filter ul li a {
+  cursor: pointer;
+  color: #60697b;
+}
+.filter.basic-filter ul li a.active,.filter.basic-filter ul li a:hover {
+  color: #3f78e0;
+}
+.filter.basic-filter.dark-filter ul li a.active,.filter.basic-filter.dark-filter ul li a:hover {
+  color: var(--color-white);
+}
+.image-list .meta,.image-list p {
+  margin: calc(var(--spacing) * 0);
+}
+.widget .tag-list li a {
+  display: flex;
+  align-items: center;
+}
+.underline-3.style-3.yellow:after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 9.37'%3E%3Cpath fill='%23fab758' d='M202.47,9.37A1191.26,1191.26,0,0,0,1.79,7.48,1.67,1.67,0,0,1,0,5.92H0A1.76,1.76,0,0,1,1.63,4.21c67-5.71,133.83-5.43,200.8-.27A2.75,2.75,0,0,1,205,6.88h0A2.6,2.6,0,0,1,202.47,9.37Z'/%3E%3C/svg%3E");
+}
+.yellow:after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208.01 8.3'%3E%3Cpath fill='%23fab758' d='M64.42,2.42Q42.78,1.46,21.19,0c-2.8-.19-4.09.89-3.87,2L3.92,1.87c-5.13-.05-5.28,3.87-.12,3.92l60.49.55c46.63,2.08,93.34,2.51,139.81,1.27,5-.13,5.39-3.87.13-3.92Z'/%3E%3C/svg%3E");
+}
+.underline-3.style-3.green:after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 9.37'%3E%3Cpath fill='%2345c4a0' d='M202.47,9.37A1191.26,1191.26,0,0,0,1.79,7.48,1.67,1.67,0,0,1,0,5.92H0A1.76,1.76,0,0,1,1.63,4.21c67-5.71,133.83-5.43,200.8-.27A2.75,2.75,0,0,1,205,6.88h0A2.6,2.6,0,0,1,202.47,9.37Z'/%3E%3C/svg%3E");
+}
+.cursor-light a {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;opacity:0.9;%7D.cls-2%7Bfill:%23262b32;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='25' cy='25' r='25'/%3E%3Cpath class='cls-2' d='M21.79,26.79,17,31.59V30a1,1,0,0,0-2,0v4a1,1,0,0,0,.08.38,1,1,0,0,0,.54.54A1,1,0,0,0,16,35h4a1,1,0,0,0,0-2H18.41l4.8-4.79a1,1,0,0,0-1.42-1.42Z'/%3E%3Cpath class='cls-2' d='M34.92,15.62a1,1,0,0,0-.54-.54A1,1,0,0,0,34,15H30a1,1,0,0,0,0,2h1.59l-4.8,4.79a1,1,0,0,0,0,1.41h0a1,1,0,0,0,1.41,0h0L33,18.41V20a1,1,0,0,0,2,0V16A1,1,0,0,0,34.92,15.62Z'/%3E%3C/svg%3E"), auto;
+}
+.cursor-dark a {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23262b32;opacity:0.9;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='25' cy='25' r='25'/%3E%3Cpath class='cls-2' d='M21.79,26.79,17,31.59V30a1,1,0,0,0-2,0v4a1,1,0,0,0,.08.38,1,1,0,0,0,.54.54A1,1,0,0,0,16,35h4a1,1,0,0,0,0-2H18.41l4.8-4.79a1,1,0,0,0-1.42-1.42Z'/%3E%3Cpath class='cls-2' d='M34.92,15.62a1,1,0,0,0-.54-.54A1,1,0,0,0,34,15H30a1,1,0,0,0,0,2h1.59l-4.8,4.79a1,1,0,0,0,0,1.41h0a1,1,0,0,0,1.41,0h0L33,18.41V20a1,1,0,0,0,2,0V16A1,1,0,0,0,34.92,15.62Z'/%3E%3C/svg%3E"), auto;
+}
+.cursor-primary a {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%233f78e0;opacity:0.9;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='25' cy='25' r='25'/%3E%3Cpath class='cls-2' d='M21.79,26.79,17,31.59V30a1,1,0,0,0-2,0v4a1,1,0,0,0,.08.38,1,1,0,0,0,.54.54A1,1,0,0,0,16,35h4a1,1,0,0,0,0-2H18.41l4.8-4.79a1,1,0,0,0-1.42-1.42Z'/%3E%3Cpath class='cls-2' d='M34.92,15.62a1,1,0,0,0-.54-.54A1,1,0,0,0,34,15H30a1,1,0,0,0,0,2h1.59l-4.8,4.79a1,1,0,0,0,0,1.41h0a1,1,0,0,0,1.41,0h0L33,18.41V20a1,1,0,0,0,2,0V16A1,1,0,0,0,34.92,15.62Z'/%3E%3C/svg%3E"), auto;
+}
+.underline-3.primary.style-3:after {
+  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 9.37'%3E%3Cpath fill='%23f78b77' d='M202.47,9.37A1191.26,1191.26,0,0,0,1.79,7.48,1.67,1.67,0,0,1,0,5.92H0A1.76,1.76,0,0,1,1.63,4.21c67-5.71,133.83-5.43,200.8-.27A2.75,2.75,0,0,1,205,6.88h0A2.6,2.6,0,0,1,202.47,9.37Z'/%3E%3C/svg%3E);
+}
+.post-header .post-meta li:before {
+  margin-block: calc(var(--spacing) * 0);
+  margin-right: 0.6rem;
+  margin-left: 0.4rem;
+}
+.post-meta li:first-child:before,article .post-meta li.ms-auto:before {
+  display: none;
+}
+.glyphs li {
+  display: block;
+}
+.glyphs li svg {
+  margin-bottom: 0.3rem;
+  display: inline-block;
+}
+.glyphs li i:before {
+  margin: calc(var(--spacing) * 0);
+  padding: calc(var(--spacing) * 0);
+  font-size: calc(1.285rem + 0.42vw);
+  color: #343f52;
+}
+.glyphs li .card-body {
+  padding-inline: 0.2rem;
+  padding-top: calc(var(--spacing) * 2);
+  padding-bottom: calc(var(--spacing) * 4);
+}
+.code-wrapper .btn-clipboard {
+  position: absolute;
+  top: calc(var(--spacing) * 2);
+  right: calc(var(--spacing) * 2);
+  z-index: 3;
+  transform: none;
+  cursor: pointer;
+  padding-inline: 0.45rem;
+  padding-block: 0.1rem;
+  font-family: var(--font-Manrope);
+  font-size: 0.6rem;
+  &:hover {
+    @media (hover: hover) {
+      border-color: white;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: white;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #262b32;
+    }
+  }
+}
+.code-wrapper pre {
+  margin-bottom: calc(var(--spacing) * 0);
+}
+pre[class*=language-] {
+  position: relative;
+  padding-top: calc(var(--spacing) * 8);
+}
+pre[class*=language-]:focus {
+  outline: 0;
+}
+:not(pre)>code[class*=language-],pre,pre[class*=language-] {
+  margin: calc(var(--spacing) * 0);
+  padding: calc(var(--spacing) * 8);
+  font-size: 0.7rem;
+  background: 0 0;
+}
+.code,.doc.mark,.external,.file,.folder,.internal,.kbd,.terminal,mark.doc {
+  position: relative;
+  margin-inline: 0.1rem;
+  margin-block: 0.275rem;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.2rem;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: rgba(164,174,198,.15);
+  padding-block: 0.05rem;
+  padding-right: 0.4rem;
+  padding-left: 1.4rem;
+  vertical-align: 2px;
+  font-size: 0.65rem;
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+.doc.mark,mark.doc {
+  padding: .05rem .4rem .2rem;
+  padding-bottom: .05rem;
+}
+.code:before,.external:after,.file:before,.folder:before,.internal:after,.kbd:before,.terminal:before {
+  position: absolute;
+  left: calc(var(--spacing) * 0);
+  margin-right: 0.4rem;
+  display: flex;
+  width: 1.6rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.2rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  padding-top: 0.05rem;
+  text-align: center;
+  font-family: var(--font-Unicons);
+  font-size: 0.7rem;
+  color: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.external {
+  padding-block: 0.05rem;
+  padding-right: 1.6rem;
+  padding-left: 0.4rem;
+  color: #60697b;
+}
+.external:after {
+  right: calc(var(--spacing) * 0);
+  left: auto;
+  margin-right: calc(var(--spacing) * 0);
+  margin-left: 0.4rem;
+  font-size: 0.65rem;
+  color: #60697b;
+}
+.internal {
+  padding-block: 0.05rem;
+  padding-right: 1.4rem;
+  padding-left: 0.4rem;
+  color: #60697b;
+  &::after {
+    content: var(--tw-content);
+    right: calc(var(--spacing) * 0);
+  }
+  &::after {
+    content: var(--tw-content);
+    left: auto;
+  }
+  &::after {
+    content: var(--tw-content);
+    margin-right: calc(var(--spacing) * 0);
+  }
+  &::after {
+    content: var(--tw-content);
+    margin-left: 0.4rem;
+  }
+  &::after {
+    content: var(--tw-content);
+    font-size: 0.65rem;
+  }
+  &::after {
+    content: var(--tw-content);
+    color: #60697b;
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "\e94c";
+    content: var(--tw-content);
+  }
+}
+.code:before {
+  font-size: 0.85rem;
+  --tw-content: "\e952";
+  content: var(--tw-content);
+}
+.terminal:before {
+  font-family: var(--font-Custom);
+  font-size: 0.8rem;
+  --tw-content: "\e905";
+  content: var(--tw-content);
+}
+.folder:before {
+  --tw-content: "\eb34";
+  content: var(--tw-content);
+}
+.file:before {
+  --tw-content: "\eaed";
+  content: var(--tw-content);
+}
+.kbd:before {
+  font-size: 0.8rem;
+  --tw-content: "\eba9";
+  content: var(--tw-content);
+}
+.text-gradient {
+  display: inline-block;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.text-gradient em {
+  padding-inline: 0.05em;
+  --tw-tracking: normal;
+  letter-spacing: normal;
+}
+.text-gradient.text-line.gradient-1:before {
+  background-color: #f857a6;
+}
+.text-gradient.text-line.gradient-2:before {
+  background-color: #f5b161;
+}
+.text-gradient.text-line.gradient-3:before {
+  background-color: #fbda61;
+}
+.text-gradient.text-line.gradient-4:before {
+  background-color: #9040db;
+}
+.text-gradient.text-line.gradient-5:before {
+  background-color: #4158d0;
+}
+.text-gradient.text-line.gradient-6:before {
+  background-color: #08aeea;
+}
+.text-gradient.text-line.gradient-7:before {
+  background-color: #0093e9;
+}
+input,select,textarea {
+  -webkit-appearance: none !important;
+}
+.form-floating:not(.form-control:disabled)::before {
+  background-color: inherit;
+}
+.bg-gradient-primary {
+  background: linear-gradient(180deg,#edf2fc,rgba(255,255,255,0) 100%);
+}
+.bg-gradient-sky {
+  background: linear-gradient(180deg,#f0f8fe,rgba(255,255,255,0) 100%);
+}
+.bg-gradient-reverse-sky {
+  background: linear-gradient(0deg,#f0f8fe,rgba(255,255,255,0) 100%);
+}
+.bg-gradient-yellow {
+  background: linear-gradient(180deg,#fff8ee,rgba(255,255,255,0) 100%);
+}
+.bg-gradient-reverse-primary {
+  background: linear-gradient(0deg,#fff8ee,rgba(255,255,255,0) 100%);
+}
+.bg-gradient-reverse-purple {
+  background: linear-gradient(0deg,#f2f3fb,rgba(255,255,255,0) 100%);
+}
+.bg-gradient-purple {
+  background: linear-gradient(180deg,#f2f3fb,rgba(255,255,255,0) 100%);
+}
+.bg-gradient-blend {
+  background: linear-gradient(160deg,#ffb7b7 9%,#727272 100%),radial-gradient(100% 100% at 30% 10%,#ffd1d1 0,#260000 100%),linear-gradient(180deg,#0ff 0,#fff 100%),radial-gradient(100% 100% at 70% 0,red 0,#00ffe0 100%),linear-gradient(280deg,#dbff00 0,#30f 100%);
+  background-blend-mode: screen,overlay,color-burn,color-dodge,normal;
+}
+.form-floating.input-group label {
+  margin-left: 0.05rem !important;
+}
+.form-floating>textarea.form-control:not(:-moz-placeholder-shown) {
+  padding-top: 1.3rem;
+}
+.form-floating>textarea.form-control:focus,.form-floating>textarea.form-control:not(:placeholder-shown) {
+  padding-top: 1.3rem;
+}
+.form-floating>textarea.form-control:-webkit-autofill {
+  padding-top: 1.3rem;
+}
+.form-floating>.form-control:not(:-moz-placeholder-shown)~label {
+  color: #959ca9;
+}
+.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label {
+  color: #959ca9;
+}
+.form-floating>.form-control:not(:-moz-placeholder-shown)~label::after {
+  background-color: transparent;
+}
+.form-floating>.form-control:focus~label::after,.form-floating>.form-control:not(:placeholder-shown)~label::after,.form-floating>.form-select~label::after {
+  background-color: transparent;
+}
+.form-check-input {
+  margin-top: 0.2rem;
+  --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.form-select {
+  background-clip: padding-box;
+}
+.mc-field-group {
+  text-align: left !important;
+}
+.input-group>.form-control:focus,.input-group>.form-select:focus {
+  z-index: 0;
+}
+.input-group>.btn {
+  max-height: 2.6rem;
+}
+.picker {
+  margin-bottom: calc(var(--spacing) * 6);
+  display: flex;
+  flex-wrap: wrap;
+}
+.picker label[for*=size]>input:checked~span {
+  background-color: #3f78e0;
+  color: var(--color-white);
+}
+.picker label[for*=color]>input:checked~span {
+  --tw-shadow: 0 0 0 2px var(--tw-shadow-color, #fff), 0 0 0 4px var(--tw-shadow-color, var(--color));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.btn {
+  position: relative;
+  display: inline-flex;
+  --tw-translate-y: calc(var(--spacing) * 0);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  align-items: center;
+  justify-content: center;
+  --tw-tracking: -0.01rem;
+  letter-spacing: -0.01rem;
+}
+.rounded-pill {
+  border-radius: 50rem !important;
+}
+.btn:not(.btn-link):hover {
+  --tw-translate-y: -0.15rem;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.15));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.btn.btn-circle.btn-play:hover {
+  --tw-translate-y: calc(var(--spacing) * 0);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.btn.btn-white:hover,.btn[class*=btn-soft-]:hover {
+  --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.05));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.btn.btn-block {
+  display: inline-flex;
+  height: 2.2rem;
+  width: 2.2rem;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--spacing) * 0);
+  font-size: 1rem !important;
+  --tw-leading: 1;
+  line-height: 1;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.btn.btn-block.btn-sm {
+  height: 1.8rem;
+  width: 1.8rem;
+  font-size: 1rem;
+}
+.btn.btn-block.btn-lg {
+  height: calc(var(--spacing) * 12);
+  width: calc(var(--spacing) * 12);
+  font-size: calc(1.265rem + 0.18vw);
+}
+.btn.btn-block.btn-play {
+  height: calc(var(--spacing) * 14);
+  width: calc(var(--spacing) * 14);
+  font-size: 1.2rem;
+}
+.btn.btn-block.btn-play i {
+  margin-left: 0.15rem;
+}
+.btn.btn-block .number {
+  margin-inline: auto;
+  margin-block: calc(var(--spacing) * 0);
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 1.1rem;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+}
+.btn-circle.ripple::after,.plyr__control--overlaid::after {
+  animation-delay: .5s;
+}
+.btn.btn-circle.counter {
+  --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.btn.btn-expand {
+  max-height: calc(var(--spacing) * 10);
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: inherit;
+  padding-block: 0.55rem;
+  padding-left: calc(var(--spacing) * 0);
+  font-size: 0.85rem;
+  &::before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::before {
+    content: var(--tw-content);
+    top: calc(var(--spacing) * 0);
+  }
+  &::before {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 0);
+  }
+  &::before {
+    content: var(--tw-content);
+    z-index: 0;
+  }
+  &::before {
+    content: var(--tw-content);
+    height: calc(var(--spacing) * 10);
+  }
+  &::before {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 10);
+  }
+  &::before {
+    content: var(--tw-content);
+    width: auto;
+  }
+  &::before {
+    content: var(--tw-content);
+    border-radius: 50rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-duration: 0.45s;
+    transition-duration: 0.45s;
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-ease: cubic-bezier(.65,0,0.076,1);
+    transition-timing-function: cubic-bezier(.65,0,0.076,1);
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  &:hover {
+    @media (hover: hover) {
+      --tw-translate-y: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: var(--color-white);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      &::before {
+        content: var(--tw-content);
+        width: 100%;
+      }
+    }
+  }
+}
+.btn.btn-expand span {
+  position: relative;
+  z-index: 2;
+  padding-left: 2.95rem;
+}
+.btn.btn-expand i {
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  z-index: 2;
+  display: flex;
+  height: calc(var(--spacing) * 10);
+  width: calc(var(--spacing) * 10);
+  align-items: center;
+  justify-content: center;
+  font-size: calc(1.26rem + 0.12vw);
+  color: var(--color-white);
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.45s;
+  transition-duration: 0.45s;
+  --tw-ease: cubic-bezier(.65,0,0.076,1);
+  transition-timing-function: cubic-bezier(.65,0,0.076,1);
+}
+.btn.btn-expand:hover {
+  background-color: inherit;
+}
+.btn.btn-expand:hover i {
+  left: calc(var(--spacing) * 1);
+}
+.btn.btn-expand.btn-sm {
+  padding-block: 0.45rem;
+  font-size: 12px;
+}
+.btn.btn-expand.btn-sm i {
+  height: 2.15rem;
+  width: 2.15rem;
+  font-size: 1.1rem;
+}
+.btn.btn-expand.btn-sm span {
+  padding-left: 2.65rem;
+}
+.btn.btn-expand.btn-sm:before {
+  width: 2.15rem;
+}
+.btn.btn-expand.btn-sm:hover:before {
+  width: 100%;
+}
+.btn.btn-expand.btn-lg {
+  padding-block: 0.7rem;
+  font-size: 0.9rem;
+}
+.btn.btn-expand.btn-lg i {
+  height: 2.9rem;
+  width: 2.9rem;
+  font-size: calc(1.26rem + 0.12vw);
+}
+.btn.btn-expand.btn-lg span {
+  padding-left: 3.4rem;
+}
+.btn.btn-expand.btn-lg:before {
+  width: 2.9rem;
+}
+.btn.btn-expand.btn-lg:hover:before {
+  width: 100%;
+}
+.input-group .btn:hover {
+  transform: none;
+}
+button:focus {
+  outline: 0;
+}
+.btn-blue.btn-expand {
+  color: #3f78e0;
+  &::before {
+    content: var(--tw-content);
+    background-color: #3f78e0;
+  }
+}
+.btn-sky.btn-expand {
+  color: #5eb9f0;
+  &::before {
+    content: var(--tw-content);
+    background-color: #5eb9f0;
+  }
+}
+.btn-purple.btn-expand {
+  color: #747ed1;
+  &::before {
+    content: var(--tw-content);
+    background-color: #747ed1;
+  }
+}
+.btn-grape.btn-expand {
+  color: #e31e24;
+  &::before {
+    content: var(--tw-content);
+    background-color: #e31e24;
+  }
+}
+.btn-violet.btn-expand {
+  color: #a07cc5;
+  &::before {
+    content: var(--tw-content);
+    background-color: #a07cc5;
+  }
+}
+.btn-pink.btn-expand {
+  color: #d16b86;
+  &::before {
+    content: var(--tw-content);
+    background-color: #d16b86;
+  }
+}
+.btn-fuchsia.btn-expand {
+  color: #e668b3;
+  &::before {
+    content: var(--tw-content);
+    background-color: #e668b3;
+  }
+}
+.btn-red.btn-expand {
+  color: #e2626b;
+  &::before {
+    content: var(--tw-content);
+    background-color: #e2626b;
+  }
+}
+.btn-orange.btn-expand {
+  color: #f78b77;
+  &::before {
+    content: var(--tw-content);
+    background-color: #f78b77;
+  }
+}
+.btn-yellow.btn-expand {
+  color: #fab758;
+  &::before {
+    content: var(--tw-content);
+    background-color: #fab758;
+  }
+}
+.btn-green.btn-expand {
+  color: #45c4a0;
+  &::before {
+    content: var(--tw-content);
+    background-color: #45c4a0;
+  }
+}
+.btn-leaf.btn-expand {
+  color: #7cb798;
+  &::before {
+    content: var(--tw-content);
+    background-color: #7cb798;
+  }
+}
+.btn-aqua.btn-expand {
+  color: #54a8c7;
+  &::before {
+    content: var(--tw-content);
+    background-color: #54a8c7;
+  }
+}
+.btn-navy.btn-expand {
+  color: #343f52;
+  &::before {
+    content: var(--tw-content);
+    background-color: #343f52;
+  }
+}
+.btn-ash.btn-expand {
+  color: #9499a3;
+  &::before {
+    content: var(--tw-content);
+    background-color: #9499a3;
+  }
+}
+.btn-white.btn-expand {
+  color: var(--color-white);
+  &::before {
+    content: var(--tw-content);
+    background-color: var(--color-white);
+  }
+}
+.btn-primary.btn-expand {
+  color: #3f78e0;
+  &::before {
+    content: var(--tw-content);
+    background-color: #3f78e0;
+  }
+}
+.btn-blue, .btn-sky, .btn-purple, .btn-grape, .btn-violet, .btn-pink, .btn-fuchsia, .btn-red, .btn-orange, .btn-yellow, .btn-green, .btn-leaf, .btn-aqua, .btn-navy, .btn-ash, .btn-white, .btn-primary {
+  color: var(--color-white) !important;
+  &:hover {
+    @media (hover: hover) {
+      color: var(--color-white) !important;
+    }
+  }
+}
+.btn-soft-blue {
+  border-color: #e0e9fa;
+  background-color: #e0e9fa;
+  color: #3f78e0;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #e0e9fa;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #e0e9fa;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #3f78e0;
+    }
+  }
+  &:active {
+    border-color: #e0e9fa;
+  }
+  &:active {
+    background-color: #e0e9fa;
+  }
+  &:active {
+    color: #3f78e0;
+  }
+}
+.btn-soft-blue.btn-expand {
+  color: #3f78e0;
+  &::before {
+    content: var(--tw-content);
+    background-color: #e0e9fa;
+  }
+}
+.btn-soft-blue.btn-expand i,.btn-soft-blue.btn-expand:before,.btn-soft-blue.btn-expand:hover,.btn-soft-blue.btn-expand:hover:before {
+  color: #3f78e0;
+}
+.btn-soft-sky {
+  border-color: #e5f4fd;
+  background-color: #e5f4fd;
+  color: #5eb9f0;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #e5f4fd;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #e5f4fd;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #5eb9f0;
+    }
+  }
+  &:active {
+    border-color: #e5f4fd;
+  }
+  &:active {
+    background-color: #e5f4fd;
+  }
+  &:active {
+    color: #5eb9f0;
+  }
+}
+.btn-soft-sky.btn-expand {
+  color: #5eb9f0;
+  &::before {
+    content: var(--tw-content);
+    background-color: #e5f4fd;
+  }
+}
+.btn-soft-sky.btn-expand i,.btn-soft-sky.btn-expand:before,.btn-soft-sky.btn-expand:hover,.btn-soft-sky.btn-expand:hover:before {
+  color: #5eb9f0;
+}
+.btn-soft-purple {
+  border-color: #e9eaf8;
+  background-color: #e9eaf8;
+  color: #747ed1;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #e9eaf8;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #e9eaf8;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #747ed1;
+    }
+  }
+  &:active {
+    border-color: #e9eaf8;
+  }
+  &:active {
+    background-color: #e9eaf8;
+  }
+  &:active {
+    color: #747ed1;
+  }
+}
+.btn-soft-purple.btn-expand {
+  color: #747ed1;
+  &::before {
+    content: var(--tw-content);
+    background-color: #e9eaf8;
+  }
+}
+.btn-soft-purple.btn-expand i,.btn-soft-purple.btn-expand:before,.btn-soft-purple.btn-expand:hover,.btn-soft-purple.btn-expand:hover:before {
+  color: #747ed1;
+}
+.btn-soft-grape {
+  border-color: #e6e5f4;
+  background-color: #e6e5f4;
+  color: #e31e24;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #e6e5f4;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #e6e5f4;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #e31e24;
+    }
+  }
+  &:active {
+    border-color: #e6e5f4;
+  }
+  &:active {
+    background-color: #e6e5f4;
+  }
+  &:active {
+    color: #e31e24;
+  }
+}
+.btn-soft-grape.btn-expand {
+  color: #e31e24;
+  &::before {
+    content: var(--tw-content);
+    background-color: #e6e5f4;
+  }
+}
+.btn-soft-grape.btn-expand i,.btn-soft-grape.btn-expand:before,.btn-soft-grape.btn-expand:hover,.btn-soft-grape.btn-expand:hover:before {
+  color: #e31e24;
+}
+.btn-soft-violet {
+  border-color: #f0eaf6;
+  background-color: #f0eaf6;
+  color: #a07cc5;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #f0eaf6;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #f0eaf6;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #a07cc5;
+    }
+  }
+  &:active {
+    border-color: #f0eaf6;
+  }
+  &:active {
+    background-color: #f0eaf6;
+  }
+  &:active {
+    color: #a07cc5;
+  }
+}
+.btn-soft-violet.btn-expand {
+  color: #a07cc5;
+  &::before {
+    content: var(--tw-content);
+    background-color: #f0eaf6;
+  }
+}
+.btn-soft-violet.btn-expand i,.btn-soft-violet.btn-expand:before,.btn-soft-violet.btn-expand:hover,.btn-soft-violet.btn-expand:hover:before {
+  color: #a07cc5;
+}
+.btn-soft-pink {
+  border-color: #f8e7ec;
+  background-color: #f8e7ec;
+  color: #d16b86;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #f8e7ec;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #f8e7ec;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #d16b86;
+    }
+  }
+  &:active {
+    border-color: #f8e7ec;
+  }
+  &:active {
+    background-color: #f8e7ec;
+  }
+  &:active {
+    color: #d16b86;
+  }
+}
+.btn-soft-pink.btn-expand {
+  color: #d16b86;
+  &::before {
+    content: var(--tw-content);
+    background-color: #f8e7ec;
+  }
+}
+.btn-soft-pink.btn-expand i,.btn-soft-pink.btn-expand:before,.btn-soft-pink.btn-expand:hover,.btn-soft-pink.btn-expand:hover:before {
+  color: #d16b86;
+}
+.btn-soft-fuchsia {
+  border-color: #fbe7f3;
+  background-color: #fbe7f3;
+  color: #e668b3;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #fbe7f3;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #fbe7f3;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #e668b3;
+    }
+  }
+  &:active {
+    border-color: #fbe7f3;
+  }
+  &:active {
+    background-color: #fbe7f3;
+  }
+  &:active {
+    color: #e668b3;
+  }
+}
+.btn-soft-fuchsia.btn-expand {
+  color: #e668b3;
+  &::before {
+    content: var(--tw-content);
+    background-color: #fbe7f3;
+  }
+}
+.btn-soft-fuchsia.btn-expand i,.btn-soft-fuchsia.btn-expand:before,.btn-soft-fuchsia.btn-expand:hover,.btn-soft-fuchsia.btn-expand:hover:before {
+  color: #e668b3;
+}
+.btn-soft-red {
+  border-color: #fae6e7;
+  background-color: #fae6e7;
+  color: #e2626b;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #fae6e7;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #fae6e7;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #e2626b;
+    }
+  }
+  &:active {
+    border-color: #fae6e7;
+  }
+  &:active {
+    background-color: #fae6e7;
+  }
+  &:active {
+    color: #e2626b;
+  }
+}
+.btn-soft-red.btn-expand {
+  color: #e2626b;
+  &::before {
+    content: var(--tw-content);
+    background-color: #fae6e7;
+  }
+}
+.btn-soft-red.btn-expand i,.btn-soft-red.btn-expand:before,.btn-soft-red.btn-expand:hover,.btn-soft-red.btn-expand:hover:before {
+  color: #e2626b;
+}
+.btn-soft-orange {
+  border-color: #feece9;
+  background-color: #feece9;
+  color: #f78b77;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #feece9;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #feece9;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #f78b77;
+    }
+  }
+  &:active {
+    border-color: #feece9;
+  }
+  &:active {
+    background-color: #feece9;
+  }
+  &:active {
+    color: #f78b77;
+  }
+}
+.btn-soft-orange.btn-expand {
+  color: #f78b77;
+  &::before {
+    content: var(--tw-content);
+    background-color: #feece9;
+  }
+}
+.btn-soft-orange.btn-expand i,.btn-soft-orange.btn-expand:before,.btn-soft-orange.btn-expand:hover,.btn-soft-orange.btn-expand:hover:before {
+  color: #f78b77;
+}
+.btn-soft-yellow {
+  border-color: #fef3e4;
+  background-color: #fef3e4;
+  color: #fab758;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #fef3e4;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #fef3e4;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #fab758;
+    }
+  }
+  &:active {
+    border-color: #fef3e4;
+  }
+  &:active {
+    background-color: #fef3e4;
+  }
+  &:active {
+    color: #fab758;
+  }
+}
+.btn-soft-yellow.btn-expand {
+  color: #fab758;
+  &::before {
+    content: var(--tw-content);
+    background-color: #fef3e4;
+  }
+}
+.btn-soft-yellow.btn-expand i,.btn-soft-yellow.btn-expand:before,.btn-soft-yellow.btn-expand:hover,.btn-soft-yellow.btn-expand:hover:before {
+  color: #fab758;
+}
+.btn-soft-green {
+  border-color: #e1f6f0;
+  background-color: #e1f6f0;
+  color: #45c4a0;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #e1f6f0;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #e1f6f0;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #45c4a0;
+    }
+  }
+  &:active {
+    border-color: #e1f6f0;
+  }
+  &:active {
+    background-color: #e1f6f0;
+  }
+  &:active {
+    color: #45c4a0;
+  }
+}
+.btn-soft-green.btn-expand {
+  color: #45c4a0;
+  &::before {
+    content: var(--tw-content);
+    background-color: #e1f6f0;
+  }
+}
+.btn-soft-green.btn-expand i,.btn-soft-green.btn-expand:before,.btn-soft-green.btn-expand:hover,.btn-soft-green.btn-expand:hover:before {
+  color: #45c4a0;
+}
+.btn-soft-leaf {
+  border-color: #eaf3ef;
+  background-color: #eaf3ef;
+  color: #7cb798;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #eaf3ef;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #eaf3ef;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #7cb798;
+    }
+  }
+  &:active {
+    border-color: #eaf3ef;
+  }
+  &:active {
+    background-color: #eaf3ef;
+  }
+  &:active {
+    color: #7cb798;
+  }
+}
+.btn-soft-leaf.btn-expand {
+  color: #7cb798;
+  &::before {
+    content: var(--tw-content);
+    background-color: #eaf3ef;
+  }
+}
+.btn-soft-leaf.btn-expand i,.btn-soft-leaf.btn-expand:before,.btn-soft-leaf.btn-expand:hover,.btn-soft-leaf.btn-expand:hover:before {
+  color: #7cb798;
+}
+.btn-soft-aqua {
+  border-color: #e4f1f6;
+  background-color: #e4f1f6;
+  color: #54a8c7;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #e4f1f6;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #e4f1f6;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #54a8c7;
+    }
+  }
+  &:active {
+    border-color: #e4f1f6;
+  }
+  &:active {
+    background-color: #e4f1f6;
+  }
+  &:active {
+    color: #54a8c7;
+  }
+}
+.btn-soft-aqua.btn-expand {
+  color: #54a8c7;
+  &::before {
+    content: var(--tw-content);
+    background-color: #e4f1f6;
+  }
+}
+.btn-soft-aqua.btn-expand i,.btn-soft-aqua.btn-expand:before,.btn-soft-aqua.btn-expand:hover,.btn-soft-aqua.btn-expand:hover:before {
+  color: #54a8c7;
+}
+.btn-soft-navy {
+  border-color: #dfe0e3;
+  background-color: #dfe0e3;
+  color: #343f52;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #dfe0e3;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #dfe0e3;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #343f52;
+    }
+  }
+  &:active {
+    border-color: #dfe0e3;
+  }
+  &:active {
+    background-color: #dfe0e3;
+  }
+  &:active {
+    color: #343f52;
+  }
+}
+.btn-soft-navy.btn-expand {
+  color: #343f52;
+  &::before {
+    content: var(--tw-content);
+    background-color: #dfe0e3;
+  }
+}
+.btn-soft-navy.btn-expand i,.btn-soft-navy.btn-expand:before,.btn-soft-navy.btn-expand:hover,.btn-soft-navy.btn-expand:hover:before {
+  color: #343f52;
+}
+.btn-soft-ash {
+  border-color: rgba(164,174,198,0.2);
+  background-color: rgba(164,174,198,0.2);
+  color: #9499a3;
+  &:hover {
+    @media (hover: hover) {
+      border-color: rgba(164,174,198,0.2);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: rgba(164,174,198,0.2);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #9499a3;
+    }
+  }
+  &:active {
+    border-color: rgba(164,174,198,0.2);
+  }
+  &:active {
+    background-color: rgba(164,174,198,0.2);
+  }
+  &:active {
+    color: #9499a3;
+  }
+}
+.btn-soft-ash.btn-expand {
+  color: #9499a3;
+  &::before {
+    content: var(--tw-content);
+    background-color: rgba(164,174,198,0.2);
+  }
+}
+.btn-soft-ash.btn-expand i,.btn-soft-ash.btn-expand:before,.btn-soft-ash.btn-expand:hover,.btn-soft-ash.btn-expand:hover:before {
+  color: #9499a3;
+}
+.btn-soft-dark {
+  border-color: #dcddde;
+  background-color: #dcddde;
+  color: #262b32;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #dcddde;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #dcddde;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #262b32;
+    }
+  }
+  &:active {
+    border-color: #dcddde;
+  }
+  &:active {
+    background-color: #dcddde;
+  }
+  &:active {
+    color: #262b32;
+  }
+}
+.btn-soft-dark.btn-expand {
+  color: #262b32;
+  &::before {
+    content: var(--tw-content);
+    background-color: #dcddde;
+  }
+}
+.btn-soft-dark.btn-expand i,.btn-soft-dark.btn-expand:before,.btn-soft-dark.btn-expand:hover,.btn-soft-dark.btn-expand:hover:before {
+  color: #262b32;
+}
+.btn-soft-primary {
+  border-color: #e0e9fa;
+  background-color: #e0e9fa;
+  color: #3f78e0;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #e0e9fa;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #e0e9fa;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #3f78e0;
+    }
+  }
+  &:active {
+    border-color: #e0e9fa;
+  }
+  &:active {
+    background-color: #e0e9fa;
+  }
+  &:active {
+    color: #3f78e0;
+  }
+}
+.btn-soft-primary.btn-expand {
+  color: #3f78e0;
+  &::before {
+    content: var(--tw-content);
+    background-color: #e0e9fa !important;
+  }
+}
+.btn-soft-primary.btn-expand i,.btn-soft-primary.btn-expand:before,.btn-soft-primary.btn-expand:hover,.btn-soft-primary.btn-expand:hover:before {
+  color: #3f78e0;
+}
+.btn-soft-ash,.btn-white {
+  color: #262b32 !important;
+  &:hover {
+    @media (hover: hover) {
+      color: #262b32 !important;
+    }
+  }
+  &:active {
+    color: #262b32 !important;
+  }
+}
+.btn-soft-ash.btn-expand,.btn-white.btn-expand {
+  color: #262b32;
+}
+.btn-soft-ash.btn-expand i,.btn-white.btn-expand i {
+  color: #262b32;
+}
+.btn-soft-ash.btn-expand:before,.btn-white.btn-expand:before {
+  background-color: #262b32;
+}
+.btn-soft-ash.btn-play:hover,.btn-white.btn-play:hover {
+  color: #262b32;
+}
+.btn-soft-ash {
+  border-color: transparent;
+  &:hover {
+    @media (hover: hover) {
+      border-color: transparent !important;
+    }
+  }
+  &:active {
+    border-color: transparent !important;
+  }
+  &:disabled {
+    border-color: transparent !important;
+  }
+}
+.btn-primary {
+  &:hover {
+    @media (hover: hover) {
+      background-color: #3f78e0;
+    }
+  }
+  &:active {
+    border-color: #3f78e0;
+  }
+  &:active {
+    background-color: #3f78e0;
+  }
+}
+.btn-outline-primary {
+  border-color: #3f78e0;
+  color: #3f78e0;
+  &:hover {
+    @media (hover: hover) {
+      border-color: #3f78e0;
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      background-color: #3f78e0;
+    }
+  }
+  &:active {
+    border-color: #3f78e0;
+  }
+  &:active {
+    background-color: #3f78e0;
+  }
+  &:disabled {
+    border-color: #3f78e0;
+  }
+  &:disabled {
+    background-color: #3f78e0;
+  }
+}
+.btn-gradient {
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  padding-block: 0.6rem;
+  color: var(--color-white) !important;
+}
+.btn-gradient.btn-sm {
+  padding-block: calc(var(--spacing) * 2);
+}
+.btn-gradient.btn-lg {
+  padding-block: calc(var(--spacing) * 3);
+}
+.gradient-1 {
+  background-image: linear-gradient(120deg,#f857a6 10%,#ef3f6e 100%);
+}
+.gradient-1.btn-outline-gradient,.gradient-1.btn-outline-gradient span {
+  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(120deg,#f857a6 10%,#ef3f6e 100%);
+}
+.gradient-2 {
+  background-image: linear-gradient(40deg,#f5b161 0.4%,#ec366e 100.2%);
+}
+.gradient-2.btn-outline-gradient,.gradient-2.btn-outline-gradient span {
+  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(40deg,#f5b161 0.4%,#ec366e 100.2%);
+}
+.gradient-3 {
+  background-image: linear-gradient(45deg,#fbda61 0,#ff5acd 100%);
+}
+.gradient-3.btn-outline-gradient,.gradient-3.btn-outline-gradient span {
+  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(45deg,#fbda61 0,#ff5acd 100%);
+}
+.gradient-4 {
+  background-image: linear-gradient(125deg,#9040db,#ff72c2 50%,#ffd84f);
+}
+.gradient-4.btn-outline-gradient,.gradient-4.btn-outline-gradient span {
+  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(125deg,#9040db,#ff72c2 50%,#ffd84f);
+}
+.gradient-5 {
+  background-image: linear-gradient(43deg,#4158d0 0,#c850c0 46%,#ffcc70 100%);
+}
+.gradient-5.btn-outline-gradient,.gradient-5.btn-outline-gradient span {
+  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(43deg,#4158d0 0,#c850c0 46%,#ffcc70 100%);
+}
+.gradient-6 {
+  background-image: linear-gradient(45deg,#08aeea 0,#2af598 100%);
+}
+.gradient-6.btn-outline-gradient,.gradient-6.btn-outline-gradient span {
+  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(45deg,#08aeea 0,#2af598 100%);
+}
+.gradient-7 {
+  background-image: linear-gradient(100deg,#e31e24 20%,#3f78e0 85%);
+}
+.gradient-7.btn-outline-gradient,.gradient-7.btn-outline-gradient span {
+  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(100deg,#e31e24 20%,#3f78e0 85%);
+}
+.gradient-8 {
+  background-image: linear-gradient(0deg,#2c46a7,#3757c4);
+}
+.gradient-8.btn-outline-gradient,.gradient-8.btn-outline-gradient span {
+  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(0deg,#2c46a7,#3757c4);
+}
+.gradient-9 {
+  background-image: linear-gradient(45deg,#ffdee9,#b5fffc);
+}
+.gradient-9.btn-outline-gradient,.gradient-9.btn-outline-gradient span {
+  background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(45deg,#ffdee9,#b5fffc);
+}
+.gradient-6,.gradient-7 {
+  background-size: 130% auto;
+}
+.btn-outline-gradient,.btn-outline-gradient.disabled,.btn-outline-gradient:disabled {
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: transparent !important;
+  background-origin: border-box;
+  padding-inline: 1.1rem;
+  padding-block: calc(var(--spacing) * 2);
+  --tw-shadow: 2px 1000px 1px var(--tw-shadow-color, #ffffff) inset;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  &:active {
+    border-color: transparent;
+  }
+  &:active {
+    color: #ffffff;
+  }
+  background-clip: content-box,border-box;
+}
+.btn-outline-gradient.btn-sm:not(.btn-circle),.btn-outline-gradient.disabled.btn-sm:not(.btn-circle),.btn-outline-gradient:disabled.btn-sm:not(.btn-circle) {
+  padding-inline: 0.9rem;
+  padding-block: 0.4rem;
+}
+.btn-outline-gradient.btn-lg,.btn-outline-gradient.disabled.btn-lg,.btn-outline-gradient:disabled.btn-lg {
+  padding-inline: 1.3rem;
+  padding-block: 0.65rem;
+}
+.btn-outline-gradient span,.btn-outline-gradient.disabled span,.btn-outline-gradient:disabled span {
+  color: #343f52;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.btn-outline-gradient.disabled:active span,.btn-outline-gradient.disabled:focus-visible span,.btn-outline-gradient.disabled:hover span,.btn-outline-gradient:active span,.btn-outline-gradient:disabled:active span,.btn-outline-gradient:disabled:focus-visible span,.btn-outline-gradient:disabled:hover span,.btn-outline-gradient:focus-visible span,.btn-outline-gradient:hover span {
+  color: var(--color-white);
+  background: 0 0;
+  -webkit-background-clip: unset;
+  -webkit-text-fill-color: unset;
+}
+.btn-lg {
+  padding: 0.65rem 1.4rem;
+  font-size: 0.85rem;
+  border-radius: 0.4rem;
+}
+.btn-sm {
+  padding: 0.4rem 1rem;
+  font-size: 0.7rem;
+  border-radius: 0.4rem;
+}
+.btn-icon.btn-sm {
+  padding-block: 0.3rem;
+}
+.btn-icon.btn-icon-end i {
+  margin-left: 0.3rem;
+}
+.navigation .btn-icon i {
+  font-size: 0.9rem;
+}
+.navigation .btn-icon.btn-icon-start i {
+  margin-right: 0.2rem;
+}
+.navigation .btn-icon.btn-icon-end i {
+  margin-left: 0.2rem;
+}
+.navbar .btn-sm {
+  font-size: 0.8rem;
+}
+.social a.btn-circle[class*=telegram-alt] {
+  border-color: transparent;
+  background-color: #2caef0;
+  color: var(--color-white);
+}
+.social.social-muted a:not(.btn-circle):not([class*=link-]) i {
+  color: #343f52;
+}
+.navbar-dark .social.social-muted a:not(.btn-circle):not([class*=link-]) i,.navbar-dark .social.social-muted a:not(.btn-circle):not([class*=link-]):hover i,.social.social-white a i,.social.social-white a:hover i {
+  color: var(--color-white) !important;
+}
+.social[class*=text-end]>a,[class*=text-end] .social>a {
+  margin-block: calc(var(--spacing) * 0);
+  margin-right: calc(var(--spacing) * 0);
+  margin-left: 0.7rem;
+}
+.social.text-center>a,.text-center .social>a {
+  margin-inline: 0.35rem;
+  margin-block: calc(var(--spacing) * 0);
+}
+.badge-lg {
+  padding-inline: 0.55rem;
+  padding-block: 0.35rem;
+  font-size: 0.6rem;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0,-30%,0);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes priceFade {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(80%);
+  }
+}
+@keyframes priceShow {
+  0% {
+    opacity: 0;
+    transform: translateY(-80%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes ripple-1 {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+@keyframes ripple-2 {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.7);
+    opacity: 0;
+  }
+}
+@keyframes loader-scale {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+.page-loader {
+  position: fixed;
+  inset: calc(var(--spacing) * 0);
+  z-index: 9999;
+  background-color: #fefefe;
+  transition-property: 0.5s;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: all;
+  transition-duration: all;
+}
+.page-loader.done {
+  visibility: hidden;
+  opacity: 0%;
+}
+.gloader,.page-loader:before,.swiper-hero:before {
+  position: absolute;
+  top: calc(2/4 * 100%);
+  left: calc(2/4 * 100%);
+  margin-top: -1.25rem;
+  margin-left: -1.25rem;
+  height: calc(var(--spacing) * 10);
+  width: calc(var(--spacing) * 10);
+  animation: loader-scale 1s ease-out infinite;
+  border-radius: 50%;
+  border-style: var(--tw-border-style);
+  border-width: 4px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: #3f78e0;
+  background-color: inherit;
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.bg-dark>.swiper-hero:before,.gloader {
+  border-color: var(--color-white);
+}
+.dropdown-menu {
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+}
+.dropdown-item {
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  --tw-tracking: -0.01rem;
+  letter-spacing: -0.01rem;
+}
+.dropdown-item:focus,.dropdown-item:hover {
+  outline: 0;
+}
+.dropdown-header {
+  padding-top: calc(var(--spacing) * 0);
+  --tw-tracking: 0.02rem;
+  letter-spacing: 0.02rem;
+  text-transform: uppercase;
+}
+.navbar .dropdown-menu[data-bs-popper] {
+  margin-top: calc(var(--spacing) * 0);
+}
+.navbar-expand .offcanvas-nav {
+  flex-direction: column;
+  flex-direction: row;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.navbar-expand .offcanvas-nav .offcanvas-body,.navbar-expand .offcanvas-nav .offcanvas-footer,.navbar-expand .offcanvas-nav .offcanvas-header {
+  width: 100%;
+}
+.navbar-expand .offcanvas-nav .offcanvas-body {
+  flex-grow: 0;
+  overflow-y: unset;
+}
+.navbar-expand .navbar-collapse .dropdown-menu {
+  margin-top: calc(var(--spacing) * 0);
+  background-color: inherit;
+  padding: calc(var(--spacing) * 0);
+}
+.navbar-expand .navbar-collapse .dropdown-menu .dropdown-item {
+  padding-block: 0.3rem;
+  padding-left: calc(var(--spacing) * 4);
+  color: var(--color-white);
+}
+.navbar-expand .navbar-collapse .nav-link,.navbar-expand .navbar-collapse .nav-link.active,.navbar-expand .navbar-collapse .nav-link:focus,.navbar-expand .navbar-collapse .nav-link:hover,.navbar-expand .navbar-collapse .show>.nav-link {
+  color: var(--color-white);
+}
+.navbar-expand .navbar-collapse .nav-link {
+  padding-block: 0.3rem;
+  white-space: nowrap;
+}
+.navbar-expand .navbar-collapse .dropdown-toggle:after {
+  position: absolute;
+  top: 0.35rem;
+  right: -0.25rem;
+  margin-right: calc(var(--spacing) * 0);
+  font-size: 0.9rem;
+}
+.navbar-expand .navbar-collapse .dropdown-submenu .dropdown-toggle:after {
+  top: 0.3rem;
+}
+.navbar-expand .dropdown-header {
+  margin-top: calc(var(--spacing) * 2);
+  padding-inline: calc(var(--spacing) * 4);
+}
+.navbar-expand .dropend .dropdown-toggle:after,.navbar-expand .dropstart .dropdown-toggle:after {
+  --tw-content: "\e92d";
+  content: var(--tw-content);
+}
+.navbar-expand .dropstart .dropdown-menu[data-bs-popper] {
+  margin-right: calc(var(--spacing) * 0);
+  margin-left: calc(var(--spacing) * 3);
+}
+.navbar-expand .dropdown-toggle:after {
+  top: calc(var(--spacing) * 1);
+}
+.navbar-expand .language-select .dropdown-toggle:after {
+  vertical-align: 0 !important;
+}
+.navbar-expand .navbar-other .nav-item.language-select .nav-link {
+  font-size: 1.05rem;
+}
+.navbar-expand .navbar-other .nav-item .nav-link>i {
+  font-size: calc(1.255rem + 0.06vw);
+}
+.navbar-expand .navbar-brand {
+  padding-block: 1.2rem;
+}
+.navbar-expand.fancy .navbar-collapse-wrapper {
+  background-color: inherit !important;
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.navbar-expand.center-logo.fixed .offcanvas-header .logo-light {
+  display: inline-block;
+}
+.navbar-expand.center-logo.fixed .offcanvas-header .logo-dark {
+  display: none;
+}
+.navbar-expand .nav-item.parent-link .dropdown-toggle {
+  padding-block: calc(var(--spacing) * 0);
+}
+.navbar-expand.navbar-light .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+  color: #3f78e0;
+}
+.navbar-expand .dropdown-mega,.navbar-expand .navbar-nav {
+  position: static;
+}
+.navbar-expand .navbar-nav .dropdown-menu.dropdown-lg {
+  padding-inline: calc(var(--spacing) * 1);
+  padding-top: 1.6rem;
+  padding-bottom: 1.3rem;
+}
+.navbar-expand .navbar-nav .dropdown-menu.dropdown-lg .dropdown-lg-content {
+  display: flex;
+  flex-direction: row;
+}
+.navbar-expand .navbar-nav .dropdown-menu.dropdown-lg .dropdown-header {
+  padding-top: calc(var(--spacing) * 0);
+}
+.navbar-expand .navbar-nav .dropdown-menu:before {
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  z-index: -1;
+  display: block;
+  height: 100%;
+  width: 100%;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.navbar-expand .navbar-nav .dropdown-menu .dropdown-toggle:after {
+  position: absolute;
+  top: 0.15rem;
+  right: calc(var(--spacing) * 4);
+  margin-right: calc(var(--spacing) * 0);
+  font-size: 0.85rem;
+}
+.navbar-expand .navbar-nav .dropdown-menu.mega-menu {
+  margin-inline: calc(var(--spacing) * 3);
+}
+.navbar-expand:not(.hover-none) .navbar-nav .dropdown-menu {
+  pointer-events: none;
+  visibility: hidden;
+  top: 120%;
+  display: block;
+  opacity: 0%;
+}
+.navbar-expand:not(.hover-none) .navbar-nav .dropdown:not(.dropdown-submenu):hover>.dropdown-menu {
+  visibility: visible;
+  top: 100%;
+  opacity: 100%;
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.25s;
+  transition-duration: 0.25s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  pointer-events: all;
+}
+.navbar-expand:not(.hover-none) .navbar-nav .dropdown-submenu {
+  position: relative;
+}
+.navbar-expand:not(.hover-none) .navbar-nav .dropdown-submenu .dropdown-menu {
+  top: 30%;
+}
+.navbar-expand:not(.hover-none) .navbar-nav .dropdown-submenu.dropstart:before {
+  position: absolute;
+  left: -1rem;
+  z-index: -1;
+  display: block;
+  height: 100%;
+  width: 100%;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.navbar-expand:not(.hover-none) .navbar-nav .dropdown-submenu:hover>.dropdown-menu {
+  visibility: visible;
+  top: calc(var(--spacing) * 0);
+  opacity: 100%;
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.25s;
+  transition-duration: 0.25s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  pointer-events: all;
+}
+.navbar-expand .dropend>.dropdown-menu {
+  margin-left: calc(var(--spacing) * 2);
+}
+.navbar-expand .dropstart>.dropdown-menu {
+  margin-right: calc(var(--spacing) * 2);
+}
+.navbar-expand .offcanvas-nav {
+  position: unset;
+}
+.navbar-expand .offcanvas-nav.offcanvas-end,.navbar-expand .offcanvas-nav.offcanvas-start {
+  width: 100%;
+}
+.navbar-expand.extended.navbar-bg-light:not(.fixed),.navbar-expand.fancy.navbar-bg-light:not(.fixed) {
+  background-color: inherit !important;
+}
+.navbar-expand.extended:not(.fixed) .navbar-collapse .nav-link {
+  padding-block: 1.15rem;
+}
+.navbar-expand.fancy:not(.fixed) .navbar-collapse .nav-link {
+  padding-block: calc(var(--spacing) * 5);
+}
+.navbar-expand[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
+  padding-block: 1.7rem;
+}
+.navbar-expand.extended .navbar-collapse-wrapper,.navbar-expand.fancy .navbar-collapse-wrapper {
+  width: 100%;
+  border-radius: 0.4rem;
+  --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.02));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.navbar-expand.extended:not(.extended-alt):not(.fixed) .navbar-collapse-wrapper {
+  padding-block: calc(var(--spacing) * 0);
+  padding-right: calc(var(--spacing) * 6);
+  padding-left: calc(var(--spacing) * 2);
+}
+.navbar-expand.extended.extended-alt:not(.fixed) .navbar-collapse-wrapper {
+  padding-inline: calc(var(--spacing) * 6);
+  padding-block: calc(var(--spacing) * 0);
+}
+.navbar-expand.fancy:not(.fixed) .navbar-collapse-wrapper {
+  margin-top: calc(var(--spacing) * 9);
+  padding-inline: calc(var(--spacing) * 6);
+  padding-block: calc(var(--spacing) * 0);
+}
+.navbar-expand.extended:not(.extended-alt) .navbar-brand {
+  padding-block: calc(var(--spacing) * 6);
+}
+.navbar-expand.extended.extended-alt .navbar-brand {
+  padding-block: calc(var(--spacing) * 7);
+}
+.navbar-expand.fixed .topbar {
+  display: none;
+}
+.navbar-expand.navbar-dark:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand.navbar-light:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand.transparent.fixed .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu {
+  margin-top: calc(var(--spacing) * 2);
+}
+.navbar-expand .navbar-collapse .nav-item.parent-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.navbar-expand .navbar-collapse .nav-item.parent-link>.nav-link:first-child {
+  padding-right: calc(var(--spacing) * 0);
+}
+.navbar-expand .navbar-collapse .nav-item.parent-link .dropdown-toggle {
+  padding-left: calc(var(--spacing) * 0);
+}
+.navbar-expand .dropdown-lg-content>div+div,.navbar-expand .mega-menu-content>.row>[class*=col-]+[class*=col-] {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-left-color: rgba(164,174,198,0.2);
+}
+.navbar-expand .mega-menu-content {
+  padding-inline: calc(var(--spacing) * 1);
+  padding-top: 0.6rem;
+  padding-bottom: 0.2rem;
+}
+.navbar-expand .mega-menu-dark {
+  background-color: #2e353e;
+}
+.navbar-expand .mega-menu-dark .img-svg {
+  background-color: rgba(255,255,255,.05);
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+}
+.navbar-expand .mega-menu-dark .img-svg:hover {
+  background-color: rgba(255,255,255,.09);
+}
+.navbar-expand .mega-menu-dark .dropdown-item {
+  color: var(--color-white);
+}
+.navbar-expand .mega-menu-dark .dropdown-item:focus,.navbar-expand .mega-menu-dark .dropdown-item:hover {
+  color: var(--color-white);
+}
+.navbar-expand .mega-menu-img {
+  padding: calc(var(--spacing) * 0);
+}
+.navbar-expand .mega-menu-img .mega-menu-content {
+  margin-inline: calc(var(--spacing) * 0);
+  margin-block: 1.8rem;
+  padding-inline: calc(var(--spacing) * 8);
+  padding-block: 0.2rem;
+}
+.navbar-expand .mega-menu-img .dropdown-item {
+  padding-inline: calc(var(--spacing) * 0);
+}
+.navbar-expand.caret-none .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+  display: none;
+}
+.dropdown-mega .dropdown-menu {
+  inset-inline: calc(var(--spacing) * 0);
+  width: auto;
+  max-width: none;
+}
+.dropend>.dropdown-menu {
+  right: auto;
+  left: 100%;
+  margin-top: calc(var(--spacing) * 0);
+  margin-left: calc(var(--spacing) * 0);
+}
+.dropstart>.dropdown-menu {
+  right: 100%;
+  left: auto;
+  margin-top: calc(var(--spacing) * 0);
+  margin-right: calc(var(--spacing) * 0);
+}
+.language-select .dropdown-toggle:after {
+  margin-right: -0.25rem;
+  margin-left: calc(var(--spacing) * 0);
+  position: unset !important;
+  vertical-align: -1px !important;
+}
+.language-select .dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: calc(2/4 * 100%);
+  margin-top: calc(var(--spacing) * 2);
+  min-width: 4rem;
+  --tw-translate-x: calc(calc(2/4 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  padding-inline: calc(var(--spacing) * 0);
+  padding-block: 0.65rem;
+}
+.share-dropdown .dropdown-menu {
+  margin-top: calc(var(--spacing) * 4) !important;
+  min-width: 6.25rem;
+  padding-block: 0.65rem;
+}
+.share-dropdown .dropdown-menu[data-popper-placement^=top] {
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: calc(var(--spacing) * 4);
+}
+.dropdown-toggle:focus {
+  outline: 0;
+}
+.dropdown-toggle:after {
+  margin-right: -0.25rem;
+  font-size: 0.85rem;
+}
+.navbar-light .language-select .dropdown-toggle:after {
+  color: #3f78e0;
+}
+.share-dropdown .dropdown-toggle:after {
+  display: none;
+}
+.navbar-nav .dropdown.dropstart>.dropdown-toggle:after {
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  --tw-content: "\e931";
+  content: var(--tw-content);
+}
+.nav-link {
+  --tw-tracking: -0.01rem;
+  letter-spacing: -0.01rem;
+  font-weight: 700;
+}
+.nav-link p {
+  font-size: 0.8rem;
+}
+.sidebar .nav-link {
+  --tw-tracking: normal;
+  letter-spacing: normal;
+}
+.navbar-other .nav-link {
+  cursor: pointer;
+}
+.nav-tabs .nav-link {
+  padding-inline: 1.3rem;
+  padding-block: 0.6rem;
+  font-size: 0.85rem;
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  background-color: var(--color-white);
+}
+.nav-tabs .nav-link i {
+  font-size: 1rem;
+}
+.nav-tabs.nav-tabs-basic {
+  border-color: transparent;
+}
+.nav-tabs.nav-tabs-basic .nav-link {
+  margin-right: calc(var(--spacing) * 4);
+  border-radius: 0;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 2px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: transparent;
+  border-bottom-color: rgba(164,174,198,0.25);
+  background-color: inherit;
+  padding-inline: calc(var(--spacing) * 0);
+  padding-block: 0.6rem;
+  font-size: 0.85rem;
+}
+.nav-tabs.nav-tabs-basic .nav-link:focus,.nav-tabs.nav-tabs-basic .nav-link:hover {
+  border-color: #3f78e0;
+}
+.nav-tabs.nav-tabs-basic .nav-item.show .nav-link,.nav-tabs.nav-tabs-basic .nav-link.active {
+  border-color: #3f78e0;
+  color: #3f78e0;
+}
+.nav-tabs.nav-pills {
+  border-color: transparent;
+}
+.nav-tabs.nav-pills .nav-link {
+  margin-right: calc(var(--spacing) * 2);
+  display: flex;
+  align-items: center;
+  border-color: transparent;
+  padding-inline: calc(var(--spacing) * 5);
+  padding-block: 0.55rem;
+  --tw-shadow: 0 0 0 0.05rem var(--tw-shadow-color, rgba(8,60,130,0.06)), 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.nav-tabs.nav-tabs-bg {
+  border-color: transparent;
+}
+.nav-tabs.nav-tabs-bg .nav-link {
+  border-radius: 0.4rem;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: transparent;
+  background-color: inherit;
+  padding-inline: 1.2rem;
+  padding-block: 1.4rem;
+  --tw-leading: calc(var(--spacing) * 5);
+  line-height: calc(var(--spacing) * 5);
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  &:first-child {
+    margin-left: calc(var(--spacing) * 0);
+  }
+  &:last-child {
+    margin-right: calc(var(--spacing) * 0);
+  }
+}
+.nav-tabs.nav-tabs-bg .nav-link.active,.nav-tabs.nav-tabs-bg .nav-link:hover {
+  border-color: transparent;
+  background-color: var(--color-white);
+  color: #343f52;
+  --tw-shadow: 0 0 0 0.05rem var(--tw-shadow-color, rgba(8,60,130,0.06)), 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.nav-tabs.nav-tabs-bg .nav-link p {
+  margin: calc(var(--spacing) * 0);
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  color: #60697b;
+}
+.nav-tabs.nav-tabs-bg.nav-tabs-shadow-lg .nav-link.active,.nav-tabs.nav-tabs-bg.nav-tabs-shadow-lg .nav-link:hover {
+  box-shadow: 0 0.25rem 1.75rem rgba(30,34,40,.07) !important;
+}
+.nav-tabs.flex-column.nav-tabs-bg .nav-item {
+  margin-bottom: calc(var(--spacing) * 4);
+}
+.nav-tabs.nav-justified .nav-item {
+  text-align: left;
+}
+.tab-content {
+  margin-top: calc(var(--spacing) * 5);
+}
+.navbar {
+  z-index: 1020;
+  width: 100%;
+}
+.navbar .container {
+  position: relative;
+}
+.navbar .navbar-collapse {
+  align-items: center;
+}
+.navbar.transparent .logo-dark {
+  display: none;
+}
+.navbar.transparent.fixed .logo-light {
+  display: none;
+}
+.navbar.transparent.fixed .logo-dark {
+  display: inline-block;
+}
+.navbar.navbar-dark .logo-dark {
+  display: none;
+}
+.navbar.navbar-light.fixed .logo-light {
+  display: none;
+}
+.navbar.navbar-light.fixed .logo-dark {
+  display: inline-block;
+}
+.navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
+  border-color: #3f78e0;
+  background-color: #3f78e0;
+  color: var(--color-white) !important;
+}
+.navbar.navbar-bg-light {
+  background-color: var(--color-white);
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.navbar.navbar-bg-dark {
+  background-color: #21262c;
+}
+.navbar .navbar-other .nav-item .nav-link {
+  padding-block: calc(var(--spacing) * 0);
+}
+.navbar .navbar-other .navbar-nav>.nav-item .nav-link {
+  padding-inline: calc(var(--spacing) * 0);
+}
+.navbar .navbar-other .navbar-nav>.nav-item+.nav-item {
+  margin-left: 0.8rem;
+}
+.navbar.fixed:not(.extended) .topbar {
+  display: none;
+}
+.navbar.fixed .navbar-collapse-wrapper {
+  margin-top: calc(var(--spacing) * 0) !important;
+  padding: calc(var(--spacing) * 0) !important;
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  background: 0 0 !important;
+}
+.navbar-clone {
+  position: fixed !important;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  z-index: 1008;
+  --tw-translate-y: -100%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  transition-delay: 0s;
+  --tw-duration: 0.3s;
+  transition-duration: 0.3s;
+  --tw-ease: ease-in-out,padding-right;
+  transition-timing-function: ease-in-out,padding-right;
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.navbar-stick {
+  --tw-translate-y: calc(var(--spacing) * 0);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.navbar-stick:not(.navbar-dark) {
+  background-color: rgba(255,255,255,.97);
+  --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.06));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+button.hamburger {
+  margin-block: calc(var(--spacing) * 0);
+  margin-right: calc(var(--spacing) * 0);
+  margin-left: 0.2rem;
+  display: flex;
+  cursor: pointer;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: inherit;
+  padding: calc(var(--spacing) * 0);
+  color: #343f52;
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  &::before {
+    content: var(--tw-content);
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+button.hamburger::-moz-focus-inner {
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  padding: calc(var(--spacing) * 0);
+}
+button.hamburger:focus {
+  outline: 0;
+}
+button.hamburger span,button.hamburger:after,button.hamburger:before {
+  height: 0.15rem;
+  width: 1.2rem;
+  border-radius: 2rem;
+  background-color: currentColor;
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+button.hamburger span,button.hamburger:before {
+  margin-inline: calc(var(--spacing) * 0);
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: calc(var(--spacing) * 1);
+}
+.navbar.navbar-bg-dark button.hamburger,.navbar.navbar-dark button.hamburger,.navbar.position-absolute:not(.fixed):not(.navbar-light) button.hamburger {
+  color: var(--color-white);
+}
+.card {
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  color: inherit;
+  --tw-shadow: 0 0 0 0.05rem var(--tw-shadow-color, rgba(8,60,130,0.06)), 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.card[class*=bg-] {
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.card-img-top img {
+  border-top-left-radius: 0.4rem;
+  border-top-right-radius: 0.4rem;
+}
+.card-img-top .plyr {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.plyr {
+  position: relative;
+  z-index: 2;
+  border-radius: 0.4rem;
+}
+[class*=card-border-] {
+  position: relative;
+}
+[class*=card-border-]:after {
+  position: absolute;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.card-border-top:after {
+  inset-inline: calc(var(--spacing) * 0);
+  top: calc(var(--spacing) * 0);
+  border-top-left-radius: 0.4rem;
+  border-top-right-radius: 0.4rem;
+  border-top-style: var(--tw-border-style);
+  border-top-width: 4px;
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: calc(.4rem - 4px);
+  border-top-color: inherit;
+  border-bottom-color: transparent;
+  border-top-style: solid;
+  border-bottom-style: solid;
+}
+.card-border-top[class*=border-soft-]:after {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 6px;
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: calc(.4rem - 6px);
+}
+.card-border-bottom:after {
+  inset-inline: calc(var(--spacing) * 0);
+  bottom: calc(var(--spacing) * 0);
+  border-bottom-right-radius: 0.4rem;
+  border-bottom-left-radius: 0.4rem;
+  border-top-style: var(--tw-border-style);
+  border-top-width: calc(.4rem - 4px);
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 4px;
+  border-top-color: transparent;
+  border-bottom-color: inherit;
+  border-bottom-style: solid;
+  border-top-style: solid;
+}
+.card-border-bottom[class*=border-soft-]:after {
+  border-top-style: var(--tw-border-style);
+  border-top-width: calc(.4rem - 6px);
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 6px;
+}
+.card-border-start:after {
+  inset-block: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  border-top-left-radius: 0.4rem;
+  border-bottom-left-radius: 0.4rem;
+  border-right-style: var(--tw-border-style);
+  border-right-width: calc(.4rem - 4px);
+  border-left-style: var(--tw-border-style);
+  border-left-width: 4px;
+  border-right-color: transparent;
+  border-left-color: inherit;
+  border-left-style: solid;
+  border-right-style: solid;
+}
+.card-border-start[class*=border-soft-]:after {
+  border-right-style: var(--tw-border-style) !important;
+  border-right-width: calc(.4rem - 6px) !important;
+  border-left-style: var(--tw-border-style) !important;
+  border-left-width: 6px !important;
+}
+.card-border-end:after {
+  inset-block: calc(var(--spacing) * 0);
+  right: calc(var(--spacing) * 0);
+  border-top-right-radius: 0.4rem;
+  border-bottom-right-radius: 0.4rem;
+  border-right-style: var(--tw-border-style);
+  border-right-width: 4px;
+  border-left-style: var(--tw-border-style);
+  border-left-width: calc(.4rem - 4px);
+  border-right-color: inherit;
+  border-left-color: transparent;
+  border-right-style: solid;
+  border-left-style: solid;
+}
+.card-border-end[class*=border-soft-]:after {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 6px;
+  border-left-style: var(--tw-border-style);
+  border-left-width: calc(.4rem - 6px);
+}
+.container-card>.card,.container-card>.card.image-wrapper:before {
+  border-radius: 0;
+}
+.accordion-wrapper .card.plain {
+  margin-bottom: calc(var(--spacing) * 0);
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: inherit;
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.accordion-wrapper .card.plain .card-body {
+  padding-block: calc(var(--spacing) * 0);
+  padding-right: calc(var(--spacing) * 0);
+  padding-left: 1.1rem;
+}
+.accordion-wrapper .card.plain .card-header {
+  padding-inline: calc(var(--spacing) * 0);
+  padding-top: calc(var(--spacing) * 0);
+  padding-bottom: 0.8rem;
+}
+.accordion-wrapper .card.plain .card-header button {
+  padding-block: calc(var(--spacing) * 0);
+  padding-right: calc(var(--spacing) * 0);
+  padding-left: 1.1rem;
+  &::before {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 0);
+  }
+}
+.accordion-wrapper .card-header button {
+  margin: calc(var(--spacing) * 0);
+  width: 100%;
+  cursor: pointer;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: inherit;
+  padding-block: calc(var(--spacing) * 0);
+  padding-right: calc(var(--spacing) * 0);
+  padding-left: calc(var(--spacing) * 4);
+  text-align: left;
+  font-size: 0.85rem;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  color: #3f78e0;
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 150ms;
+  transition-duration: 150ms;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  &::before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::before {
+    content: var(--tw-content);
+    left: 1.3rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    margin-top: -0.25rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    margin-left: -0.3rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    display: inline-block;
+  }
+  &::before {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 4);
+  }
+  &::before {
+    content: var(--tw-content);
+    font-family: var(--font-Unicons);
+  }
+  &::before {
+    content: var(--tw-content);
+    font-size: 1.15rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  &::before {
+    content: var(--tw-content);
+    color: #3f78e0;
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-content: "\e932";
+    content: var(--tw-content);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.accordion-wrapper .card-header button.collapsed {
+  color: #343f52;
+  &::before {
+    content: var(--tw-content);
+    --tw-content: "\e92d";
+    content: var(--tw-content);
+  }
+}
+.accordion-item.icon .card-body {
+  padding-top: calc(var(--spacing) * 0);
+  padding-right: calc(var(--spacing) * 5);
+  padding-bottom: calc(var(--spacing) * 1);
+  padding-left: 2.8rem;
+}
+.accordion-item.icon button {
+  display: flex;
+  align-items: center;
+  padding-block: calc(var(--spacing) * 0);
+  padding-right: calc(var(--spacing) * 0);
+  padding-left: calc(var(--spacing) * 6);
+  &::before {
+    content: var(--tw-content);
+    display: none;
+  }
+}
+.accordion-item.icon button>span {
+  position: absolute;
+  left: 1.3rem;
+}
+.accordion-item.icon button>span i {
+  font-size: 1rem;
+}
+.collapse-link {
+  font-size: 0.85rem;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+  color: #3f78e0;
+  &::before {
+    content: var(--tw-content);
+    margin-right: 0.4rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    margin-left: -0.3rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    display: inline-block;
+  }
+  &::before {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 4);
+  }
+  &::before {
+    content: var(--tw-content);
+    font-size: 1.15rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-content: "\e932";
+    content: var(--tw-content);
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: #3f78e0;
+    }
+  }
+}
+.collapse-link:before {
+  font-family: var(--font-Unicons);
+  vertical-align: -4px;
+}
+.collapse-link.collapsed {
+  color: #343f52;
+  &::before {
+    content: var(--tw-content);
+    --tw-content: "\e92d";
+    content: var(--tw-content);
+  }
+}
+.accordion-collapse>.card-footer {
+  background-color: #273444;
+  padding: calc(var(--spacing) * 0);
+}
+.pagination {
+  --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.pagination .page-link {
+  display: flex;
+  height: calc(var(--spacing) * 10);
+  width: calc(var(--spacing) * 10);
+  align-items: center;
+  justify-content: center;
+  font-size: 0.65rem;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
+}
+.pagination .page-link i {
+  font-size: 0.9rem;
+}
+.pagination.pagination-alt {
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.pagination.pagination-alt .page-item {
+  margin-right: calc(var(--spacing) * 2);
+}
+.pagination.pagination-alt .page-item .page-link {
+  border-radius: 0.4rem;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  --tw-shadow: 0 0.25rem 1.75rem var(--tw-shadow-color, rgba(30,34,40,0.07));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  right: calc(var(--spacing) * 0);
+  z-index: 2;
+  padding-inline: calc(var(--spacing) * 4);
+  padding-block: 1.05rem;
+  color: inherit;
+  &::before {
+    content: var(--tw-content);
+    height: 1.2rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    width: 1.2rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    font-size: 1.2rem;
+  }
+}
+.alert-dismissible .btn-close:before {
+  background-color: inherit;
+}
+.btn-close:before {
+  margin: calc(var(--spacing) * 0);
+  display: flex;
+  height: 1.8rem;
+  width: 1.8rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  background-color: rgba(0,0,0,.08);
+  padding: calc(var(--spacing) * 0);
+  font-family: var(--font-Unicons);
+  font-size: 1.05rem;
+  --tw-leading: 1.8rem;
+  line-height: 1.8rem;
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  transition-property: background;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: ease-in-out;
+  transition-timing-function: ease-in-out;
+  --tw-content: "\ed3b";
+  content: var(--tw-content);
+}
+.alert-dismissible .btn-close:hover:before {
+  background-color: inherit;
+}
+.alert-icon i {
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  z-index: 2;
+  padding-inline: calc(var(--spacing) * 4);
+  padding-block: 0.8rem;
+  font-size: 1rem;
+}
+.alert[class*=bg-] {
+  padding-inline: calc(var(--spacing) * 0);
+  padding-block: 0.8rem;
+}
+.alert[class*=bg-] .alert-inner {
+  padding-right: calc(var(--spacing) * 12);
+}
+.alert[class*=bg-].alert-dismissible .btn-close {
+  top: calc(2/4 * 100%);
+  --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  padding-block: calc(var(--spacing) * 0);
+  color: rgba(255,255,255,0.8);
+}
+.alert[class*=bg-].alert-dismissible .btn-close:hover {
+  color: var(--color-white);
+}
+.progress-list .progressbar svg,.progress-list .progressbar svg path {
+  border-radius: var(--radius-2xl);
+}
+.progress-list .progressbar.line svg {
+  height: 0.3rem;
+}
+.progressbar.semi-circle .progressbar-text {
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  margin: calc(var(--spacing) * 0);
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 2rem;
+  --tw-leading: 1;
+  line-height: 1;
+  color: #343f52;
+  &::after {
+    content: var(--tw-content);
+    display: block;
+  }
+  &::after {
+    content: var(--tw-content);
+    padding-bottom: 0.1rem;
+  }
+  &::after {
+    content: var(--tw-content);
+    padding-left: 0.01rem;
+  }
+  &::after {
+    content: var(--tw-content);
+    font-size: 1rem;
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "%";
+    content: var(--tw-content);
+  }
+}
+.progressbar svg path:first-child {
+  stroke: rgba(30,34,40,0.06);
+}
+.progressbar.blue svg path:last-child {
+  stroke: #3f78e0;
+}
+.progressbar.semi-circle.blue svg path:first-child {
+  stroke: rgba(63,120,224,0.1);
+}
+.progressbar.sky svg path:last-child {
+  stroke: #5eb9f0;
+}
+.progressbar.semi-circle.sky svg path:first-child {
+  stroke: rgba(94,185,240,0.1);
+}
+.progressbar.purple svg path:last-child {
+  stroke: #747ed1;
+}
+.progressbar.semi-circle.purple svg path:first-child {
+  stroke: rgba(116,126,209,0.1);
+}
+.progressbar.grape svg path:last-child {
+  stroke: #e31e24;
+}
+.progressbar.semi-circle.grape svg path:first-child {
+  stroke: rgba(96,93,186,0.1);
+}
+.progressbar.violet svg path:last-child {
+  stroke: #a07cc5;
+}
+.progressbar.semi-circle.violet svg path:first-child {
+  stroke: rgba(160,124,197,0.1);
+}
+.progressbar.pink svg path:last-child {
+  stroke: #d16b86;
+}
+.progressbar.semi-circle.pink svg path:first-child {
+  stroke: rgba(209,107,134,0.1);
+}
+.progressbar.fuchsia svg path:last-child {
+  stroke: #e668b3;
+}
+.progressbar.semi-circle.fuchsia svg path:first-child {
+  stroke: rgba(230,104,179,0.1);
+}
+.progressbar.red svg path:last-child {
+  stroke: #e2626b;
+}
+.progressbar.semi-circle.red svg path:first-child {
+  stroke: rgba(226,98,107,0.1);
+}
+.progressbar.orange svg path:last-child {
+  stroke: #f78b77;
+}
+.progressbar.semi-circle.orange svg path:first-child {
+  stroke: rgba(247,139,119,0.1);
+}
+.progressbar.yellow svg path:last-child {
+  stroke: #fab758;
+}
+.progressbar.semi-circle.yellow svg path:first-child {
+  stroke: rgba(250,183,88,0.1);
+}
+.progressbar.green svg path:last-child {
+  stroke: #45c4a0;
+}
+.progressbar.semi-circle.green svg path:first-child {
+  stroke: rgba(69,196,160,0.1);
+}
+.progressbar.leaf svg path:last-child {
+  stroke: #7cb798;
+}
+.progressbar.semi-circle.leaf svg path:first-child {
+  stroke: rgba(124,183,152,0.1);
+}
+.progressbar.aqua svg path:last-child {
+  stroke: #54a8c7;
+}
+.progressbar.semi-circle.aqua svg path:first-child {
+  stroke: rgba(84,168,199,0.1);
+}
+.progressbar.navy svg path:last-child {
+  stroke: #343f52;
+}
+.progressbar.semi-circle.navy svg path:first-child {
+  stroke: rgba(52,63,82,0.1);
+}
+.progressbar.ash svg path:last-child {
+  stroke: #9499a3;
+}
+.progressbar.semi-circle.ash svg path:first-child {
+  stroke: rgba(148,153,163,0.1);
+}
+.progressbar.white svg path:last-child {
+  stroke: var(--color-white);
+}
+.progressbar.semi-circle.white svg path:first-child {
+  stroke: rgba(255,255,255,0.1);
+}
+.progressbar.light svg path:last-child {
+  stroke: #fefefe;
+}
+.progressbar.semi-circle.light svg path:first-child {
+  stroke: rgba(254,254,254,0.1);
+}
+.progressbar.gray svg path:last-child {
+  stroke: #f6f7f9;
+}
+.progressbar.semi-circle.gray svg path:first-child {
+  stroke: rgba(246,247,249,0.1);
+}
+.progressbar.dark svg path:last-child {
+  stroke: #262b32;
+}
+.progressbar.semi-circle.dark svg path:first-child {
+  stroke: rgba(38,43,50,0.1);
+}
+.progressbar.primary svg path:last-child {
+  stroke: #3f78e0;
+}
+.progressbar.aqua svg path:last-child {
+  stroke: #54a8c7;
+}
+.progressbar.semi-circle.primary svg path:first-child {
+  stroke: rgba(63,120,224,0.1);
+}
+.progressbar.soft-blue svg path:last-child {
+  stroke: #8caeec;
+}
+.progressbar.semi-circle.soft-blue svg path:first-child {
+  stroke: rgba(63,120,224,0.1);
+}
+.progressbar.soft-sky svg path:last-child {
+  stroke: #9ed5f6;
+}
+.progressbar.semi-circle.soft-sky svg path:first-child {
+  stroke: rgba(94,185,240,0.1);
+}
+.progressbar.soft-purple svg path:last-child {
+  stroke: #acb2e3;
+}
+.progressbar.semi-circle.soft-purple svg path:first-child {
+  stroke: rgba(116,126,209,0.1);
+}
+.progressbar.soft-grape svg path:last-child {
+  stroke: #a09ed6;
+}
+.progressbar.semi-circle.soft-grape svg path:first-child {
+  stroke: rgba(96,93,186,0.1);
+}
+.progressbar.soft-violet svg path:last-child {
+  stroke: #c6b0dc;
+}
+.progressbar.semi-circle.soft-violet svg path:first-child {
+  stroke: rgba(160,124,197,0.1);
+}
+.progressbar.soft-pink svg path:last-child {
+  stroke: #e3a6b6;
+}
+.progressbar.semi-circle.soft-pink svg path:first-child {
+  stroke: rgba(209,107,134,0.1);
+}
+.progressbar.soft-fuchsia svg path:last-child {
+  stroke: #f0a4d1;
+}
+.progressbar.semi-circle.soft-fuchsia svg path:first-child {
+  stroke: rgba(230,104,179,0.1);
+}
+.progressbar.soft-red svg path:last-child {
+  stroke: #eea1a6;
+}
+.progressbar.semi-circle.soft-red svg path:first-child {
+  stroke: rgba(226,98,107,0.1);
+}
+.progressbar.soft-orange svg path:last-child {
+  stroke: #fab9ad;
+}
+.progressbar.semi-circle.soft-orange svg path:first-child {
+  stroke: rgba(247,139,119,0.1);
+}
+.progressbar.soft-yellow svg path:last-child {
+  stroke: #fcd49b;
+}
+.progressbar.semi-circle.soft-yellow svg path:first-child {
+  stroke: rgba(250,183,88,0.1);
+}
+.progressbar.soft-green svg path:last-child {
+  stroke: #8fdcc6;
+}
+.progressbar.semi-circle.soft-green svg path:first-child {
+  stroke: rgba(69,196,160,0.1);
+}
+.progressbar.soft-leaf svg path:last-child {
+  stroke: #b0d4c1;
+}
+.progressbar.semi-circle.soft-leaf svg path:first-child {
+  stroke: rgba(124,183,152,0.1);
+}
+.progressbar.soft-aqua svg path:last-child {
+  stroke: #98cbdd;
+}
+.progressbar.semi-circle.soft-aqua svg path:first-child {
+  stroke: rgba(84,168,199,0.1);
+}
+.progressbar.soft-navy svg path:last-child {
+  stroke: #858c97;
+}
+.progressbar.semi-circle.soft-navy svg path:first-child {
+  stroke: rgba(52,63,82,0.1);
+}
+.progressbar.soft-ash svg path:last-child {
+  stroke: #bfc2c8;
+}
+.progressbar.semi-circle.soft-ash svg path:first-child {
+  stroke: rgba(148,153,163,0.1);
+}
+.progress-wrap.active-progress {
+  visibility: visible;
+  --tw-translate-y: calc(var(--spacing) * 0);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.btn-close.disabled,.btn-close:disabled {
+  pointer-events: none;
+  opacity: 25%;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.btn-close-white {
+  color: var(--color-white) !important;
+  &::before {
+    content: var(--tw-content);
+    background-color: rgba(255,255,255,.08);
+  }
+  &:hover {
+    @media (hover: hover) {
+      color: var(--color-white) !important;
+    }
+  }
+}
+.btn-close-white:hover:before {
+  background-color: rgba(255,255,255,.11);
+}
+.btn-close[data-bs-dismiss=modal] {
+  position: absolute;
+  top: 0.7rem;
+  right: 0.7rem;
+}
+.modal.fade.modal-bottom-center .modal-dialog {
+  position: absolute;
+  inset-inline: calc(var(--spacing) * 0);
+  bottom: calc(var(--spacing) * 0);
+}
+.has-tooltip:focus {
+  outline: 0;
+}
+.white-tooltip {
+  z-index: 11;
+  margin-right: calc(var(--spacing) * 1) !important;
+}
+.white-tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,.white-tooltip.bs-tooltip-start .tooltip-arrow::before {
+  border-left-color: var(--color-white);
+}
+.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow, .bs-tooltip-start .tooltip-arrow {
+  right: calc(-1 * 0.4rem);
+  height: 0.8rem;
+  width: 0.4rem;
+}
+.tooltip .tooltip-arrow {
+  display: block;
+  height: 0.4rem;
+  width: 0.8rem;
+}
+.white-tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .white-tooltip.bs-tooltip-start .tooltip-arrow::before {
+  border-left-color: var(--color-white);
+}
+.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before {
+  left: -1px;
+  border-style: var(--tw-border-style);
+  border-width: calc(0.8rem * 0.5) 0 calc(0.8rem * 0.5) 0.4rem;
+  border-left-color: #3f78e0;
+}
+.tooltip .tooltip-arrow::before {
+  position: absolute;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: transparent;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.tooltip.show {
+  opacity: 0.98;
+}
+.tooltip {
+  pointer-events: none;
+  border-radius: 0.4rem;
+  background-color: #3f78e0;
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-Manrope);
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-white);
+  opacity: 0.98;
+}
+.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow, .bs-tooltip-top .tooltip-arrow {
+  bottom: calc(-1 * 0.4rem);
+}
+.tooltip .tooltip-arrow {
+  display: block;
+  height: 0.4rem;
+  width: 0.8rem;
+}
+.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
+  top: -1px;
+  border-width: 0.4rem calc(0.8rem * .5) 0;
+  border-top-color: #3f78e0;
+}
+.tooltip .tooltip-arrow::before {
+  position: absolute;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: transparent;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow, .bs-tooltip-end .tooltip-arrow {
+  left: calc(-1 * 0.4rem);
+  height: 0.8rem;
+  width: 0.4rem;
+}
+.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {
+  right: -1px;
+  border-width: calc(0.8rem * .5) 0.4rem calc(0.8rem * .5) 0;
+  border-right-color: #3f78e0;
+}
+.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow, .bs-tooltip-bottom .tooltip-arrow {
+  top: calc(-1 * 0.4rem);
+}
+.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {
+  bottom: -1px;
+  border-width: 0 calc(0.8rem * .5) 0.4rem;
+  border-bottom-color: #3f78e0;
+}
+.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow, .bs-tooltip-start .tooltip-arrow {
+  right: calc(-1 * 0.4rem);
+  height: 0.8rem;
+  width: 0.4rem;
+}
+.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before {
+  left: -1px;
+  border-width: calc(0.8rem * .5)0 calc(0.8rem * .5) 0.4rem;
+  border-left-color: #3f78e0;
+}
+.popover {
+  z-index: 1070;
+  display: block;
+  max-width: 276px;
+  border-radius: 0.4rem;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: rgba(164,174,198,0.2);
+  background-color: var(--color-white);
+  background-clip: padding-box;
+  text-align: left;
+  text-align: start;
+  font-family: var(--font-Manrope);
+  font-size: 0.8rem;
+  --tw-leading: 1.7;
+  line-height: 1.7;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  --tw-tracking: normal;
+  letter-spacing: normal;
+  overflow-wrap: normal;
+  word-break: normal;
+  white-space: normal;
+  text-transform: none;
+  font-style: normal;
+  text-decoration-line: none;
+  --tw-shadow: 0rem 0rem 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  word-wrap: break-word;
+  text-shadow: none;
+  word-spacing: normal;
+  line-break: auto;
+}
+.popover .popover-arrow {
+  display: block;
+  width: 1rem;
+  height: 0.5rem;
+}
+.popover .popover-arrow::after, .popover .popover-arrow::before {
+  position: absolute;
+  display: block;
+  content: "";
+  border-color: transparent;
+  border-style: solid;
+  border-width: 0;
+}
+.bs-popover-auto[data-popper-placement^=top]>.popover-arrow, .bs-popover-top>.popover-arrow {
+  bottom: calc(-1 * (0.5rem) - 1px);
+}
+.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before, .bs-popover-top>.popover-arrow::after, .bs-popover-top>.popover-arrow::before {
+  border-width: 0.5rem calc(1rem * .5) 0;
+}
+.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before, .bs-popover-top>.popover-arrow::before {
+  bottom: 0;
+  border-top-color: rgba(164,174,198,0.2);
+}
+.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-top>.popover-arrow::after {
+  bottom: 1px;
+  border-top-color: #ffffff;
+}
+.bs-popover-auto[data-popper-placement^=right]>.popover-arrow, .bs-popover-end>.popover-arrow {
+  left: calc(-1 * (0.5rem) - 1px);
+  width: 0.5rem;
+  height: 1rem;
+}
+.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before, .bs-popover-end>.popover-arrow::after, .bs-popover-end>.popover-arrow::before {
+  border-width: calc(1rem * .5) 0.5rem calc(1rem * .5) 0;
+}
+.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before, .bs-popover-end>.popover-arrow::before {
+  left: 0;
+  border-right-color: rgba(164,174,198,0.2);
+}
+.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
+  left: 1px;
+  border-right-color: #ffffff;
+}
+.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow, .bs-popover-bottom>.popover-arrow {
+  top: calc(-1 * (0.5rem) - 1px);
+}
+.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before, .bs-popover-bottom>.popover-arrow::after, .bs-popover-bottom>.popover-arrow::before {
+  border-width: 0 calc(1rem * .5) 0.5rem;
+}
+.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before, .bs-popover-bottom>.popover-arrow::before {
+  top: 0;
+  border-bottom-color: rgba(164,174,198,0.2);
+}
+.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after, .bs-popover-bottom>.popover-arrow::after {
+  top: 1px;
+  border-bottom-color: #ffffff;
+}
+.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .bs-popover-bottom .popover-header::before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: block;
+  width: 1rem;
+  margin-left: calc(-.5 * 1rem);
+  content: "";
+  border-bottom: 1px solid #ffffff;
+}
+.bs-popover-auto[data-popper-placement^=left]>.popover-arrow, .bs-popover-start>.popover-arrow {
+  right: calc(-1 * (0.5rem) - 1px);
+  width: 0.5rem;
+  height: 1rem;
+}
+.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before, .bs-popover-start>.popover-arrow::after, .bs-popover-start>.popover-arrow::before {
+  border-width: calc(1rem * .5) 0 calc(1rem * .5) 0.5rem;
+}
+.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before, .bs-popover-start>.popover-arrow::before {
+  right: 0;
+  border-left-color: rgba(164,174,198,0.2);
+}
+.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .bs-popover-start>.popover-arrow::after {
+  right: 1px;
+  border-left-color: #ffffff;
+}
+.popover-header {
+  padding: 1rem 1.25rem;
+  margin-bottom: 0;
+  font-size: 0.8rem;
+  color: #343f52;
+  background-color: #ffffff;
+  border-bottom: 1px solid rgba(164,174,198,0.2);
+  border-top-left-radius: calc(0.4rem - 1px);
+  border-top-right-radius: calc(0.4rem - 1px);
+}
+.popover-header:empty {
+  display: none;
+}
+.popover-body {
+  padding: 1rem 1.25rem;
+  color: #60697b;
+}
+.has-popover:focus {
+  outline: 0;
+}
+.popover-header {
+  padding: 1rem 1.25rem .25rem;
+  border: 0;
+  font-size: 1rem;
+}
+.popover-body {
+  padding: 0 1.25rem 1rem;
+}
+a.hover-2::before {
+  transform: scale3d(0,1,1);
+}
+a.hover-2:hover:before {
+  transform: scale3d(1,1,1);
+}
+.swiper-controls {
+  pointer-events: none;
+  position: absolute !important;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  height: 100%;
+  width: 100%;
+}
+.swiper-controls .swiper-navigation {
+  pointer-events: all;
+}
+.swiper-controls .swiper-navigation .swiper-button {
+  height: 2.2rem;
+  width: 2.2rem;
+  border-radius: 100%;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: rgba(255,255,255,.7);
+  --tw-leading: inherit;
+  line-height: inherit;
+  color: #343f52;
+  --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.02));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  &::after {
+    content: var(--tw-content);
+    font-size: 1.2rem;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+  text-shadow: none;
+}
+.swiper-controls .swiper-navigation .swiper-button:hover {
+  background-color: rgba(255,255,255,.9);
+}
+.swiper-controls .swiper-navigation .swiper-button:focus {
+  outline: 0;
+}
+.swiper-controls .swiper-navigation .swiper-button:after {
+  font-family: var(--font-Unicons);
+}
+.swiper-controls .swiper-navigation .swiper-button.swiper-button-prev {
+  left: calc(var(--spacing) * 4);
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "\e949";
+    content: var(--tw-content);
+  }
+}
+.swiper-controls .swiper-navigation .swiper-button.swiper-button-next {
+  right: calc(var(--spacing) * 4);
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "\e94c";
+    content: var(--tw-content);
+  }
+}
+.swiper-controls .swiper-navigation .swiper-button.swiper-button-disabled {
+  background-color: rgba(255,255,255,.7);
+}
+.swiper-controls .swiper-pagination {
+  position: absolute !important;
+  bottom: -2.8rem;
+  pointer-events: all;
+}
+.swiper-controls .swiper-pagination .swiper-pagination-bullet {
+  position: relative;
+  margin-inline: 0.3rem;
+  margin-block: calc(var(--spacing) * 0);
+  display: inline-block;
+  height: calc(var(--spacing) * 2);
+  width: calc(var(--spacing) * 2);
+  scale: 0.6;
+  border-radius: 100%;
+  border-style: var(--tw-border-style);
+  border-width: 3px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: transparent;
+  background-color: #aab0bc;
+  padding: calc(var(--spacing) * 0);
+  opacity: 50%;
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  &:hover {
+    @media (hover: hover) {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+  -webkit-backface-visibility: visible;
+}
+.swiper-controls .swiper-pagination .swiper-pagination-bullet:focus {
+  outline: 0;
+}
+.swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
+  --tw-scale-x: 100%;
+  --tw-scale-y: 100%;
+  --tw-scale-z: 100%;
+  scale: var(--tw-scale-x) var(--tw-scale-y);
+  border-color: #aab0bc;
+  background-color: inherit;
+}
+.swiper-container.clients .swiper {
+  display: flex;
+  align-items: center;
+}
+.swiper-container.nav-color .swiper-button {
+  background-color: rgba(63,120,224,.9) !important;
+  color: var(--color-white);
+}
+.swiper-container.nav-color .swiper-button.swiper-button-disabled,.swiper-container.nav-color .swiper-slide figure .item-link.swiper-button-disabled {
+  background-color: rgba(63,120,224,.7) !important;
+}
+.swiper-container.nav-color .swiper-button:hover {
+  background-color: #3f78e0 !important;
+}
+.swiper-container.nav-dark .swiper-button,.swiper-container.nav-dark .swiper-slide figure .item-link {
+  background-color: rgba(0,0,0,.3) !important;
+  color: var(--color-white);
+}
+.swiper-container.nav-dark .swiper-button.swiper-button-disabled,.swiper-container.nav-dark .swiper-slide figure .item-link.swiper-button-disabled {
+  background-color: rgba(0,0,0,.1) !important;
+}
+.swiper-container.nav-dark .swiper-button:hover,.swiper-container.nav-dark .swiper-slide figure .item-link:hover {
+  background-color: rgba(0,0,0,.5) !important;
+}
+.swiper-container.nav-bottom .swiper-navigation {
+  position: absolute;
+  bottom: -3.2rem;
+  left: calc(var(--spacing) * 0);
+  display: flex;
+  width: 100%;
+  transform: none;
+  flex-direction: row;
+  justify-content: center;
+}
+.swiper-container.nav-bottom .swiper-navigation .swiper-button {
+  position: relative;
+  inset-inline: auto;
+  top: auto;
+  bottom: calc(var(--spacing) * 0);
+  margin-inline: 0.2rem;
+  margin-block: calc(var(--spacing) * 0);
+}
+.swiper-container.nav-bottom .swiper-navigation+.swiper-pagination {
+  bottom: -5.2rem;
+}
+.swiper-container.nav-bottom.nav-far .swiper-navigation {
+  bottom: -4.1rem;
+}
+.swiper-container.nav-bottom.nav-start .swiper-navigation {
+  justify-content: flex-start;
+  text-align: left;
+}
+.swiper-container.nav-bottom.nav-start .swiper-navigation .swiper-button {
+  margin-block: calc(var(--spacing) * 0);
+  margin-right: 0.4rem;
+  margin-left: calc(var(--spacing) * 0);
+}
+.swiper-container.dots-over .swiper-pagination {
+  bottom: 0.6rem;
+}
+.swiper-container.dots-over .swiper-pagination .swiper-pagination-bullet {
+  background-color: var(--color-white);
+  opacity: 100%;
+  --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.02));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.swiper-container.dots-over .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
+  border-color: var(--color-white);
+  background: 0 0;
+}
+.swiper-container.dots-start .swiper-pagination {
+  justify-content: flex-start;
+  text-align: left;
+}
+.swiper-container.dots-light .swiper-pagination .swiper-pagination-bullet {
+  background-color: var(--color-white);
+  opacity: 100%;
+}
+.swiper-container.dots-light .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
+  border-color: var(--color-white);
+  background-color: inherit;
+}
+.swiper-container.dots-dark .swiper-pagination .swiper-pagination-bullet {
+  background-color: rgba(0,0,0,.3);
+  opacity: 100%;
+}
+.swiper-container.dots-dark .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
+  border-color: rgba(0,0,0,0.3);
+  background-color: inherit;
+}
+.swiper-container.dots-light.dots-light-75 .swiper-pagination .swiper-pagination-bullet {
+  opacity: 75%;
+}
+.swiper-container.dots-closer .swiper-pagination {
+  bottom: -2rem;
+}
+.swiper-slide.bg-overlay:before {
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  z-index: 1;
+  display: block;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(30,34,40,.5);
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.swiper-slide.rounded.bg-overlay:before {
+  border-radius: 0.4rem;
+}
+.swiper-slide.bg-overlay-300:before {
+  background-color: rgba(30,34,40,.3);
+}
+.swiper-slide.bg-overlay-400:before {
+  background-color: rgba(30,34,40,.4);
+}
+.swiper-slide.bg-overlay .caption-wrapper>*,.swiper-slide.bg-overlay [class*=container]>* {
+  position: relative;
+  z-index: 3;
+}
+.swiper-slide .caption-wrapper {
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+.swiper-slide .caption-wrapper .caption {
+  display: flex;
+}
+.swiper-hero,.swiper-hero .swiper-slide {
+  height: 750px;
+}
+.swiper-hero .swiper-slide {
+  background-size: cover;
+  background-position: center center;
+}
+.swiper-fullscreen {
+  height: 100vh;
+}
+.swiper-fullscreen .swiper:not(.swiper-thumbs) .swiper-slide {
+  height: 100vh;
+  background-size: cover;
+  background-position: center center;
+}
+.swiper-fullscreen .swiper-thumbs {
+  position: absolute;
+  bottom: calc(var(--spacing) * 4);
+  left: calc(2/4 * 100%);
+  z-index: 9999;
+  --tw-translate-x: calc(calc(2/4 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.swiper-fullscreen .swiper-thumbs .swiper-slide {
+  height: calc(var(--spacing) * 10) !important;
+  width: calc(var(--spacing) * 10) !important;
+  cursor: pointer;
+  &::after {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::after {
+    content: var(--tw-content);
+    top: calc(var(--spacing) * 0);
+  }
+  &::after {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 0);
+  }
+  &::after {
+    content: var(--tw-content);
+    z-index: 2;
+  }
+  &::after {
+    content: var(--tw-content);
+    box-sizing: border-box;
+  }
+  &::after {
+    content: var(--tw-content);
+    display: block;
+  }
+  &::after {
+    content: var(--tw-content);
+    height: 100%;
+  }
+  &::after {
+    content: var(--tw-content);
+    width: 100%;
+  }
+  &::after {
+    content: var(--tw-content);
+    border-radius: 100%;
+  }
+  &::after {
+    content: var(--tw-content);
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  &::after {
+    content: var(--tw-content);
+    border-color: transparent;
+  }
+  &::after {
+    content: var(--tw-content);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+}
+.swiper-fullscreen .swiper-thumbs .swiper-slide img {
+  height: calc(var(--spacing) * 10);
+  width: calc(var(--spacing) * 10);
+  border-radius: 100%;
+}
+.swiper-fullscreen .swiper-thumbs .swiper-slide.swiper-slide-thumb-active:after {
+  border-color: rgba(255,255,255,0.6);
+}
+.swiper-container .swiper-slide [class*=animate__] {
+  visibility: hidden;
+  animation-name: none;
+}
+.swiper-container .swiper-slide.swiper-slide-active [class*=animate__] {
+  visibility: visible;
+}
+.swiper-container .swiper-slide.swiper-slide-active [class*=animate__].animate__fadeInUp {
+  animation-name: fadeInUp;
+}
+.swiper-container .swiper-slide.swiper-slide-active [class*=animate__].animate__fadeInDown {
+  animation-name: fadeInDown;
+}
+.swiper-container .swiper-slide.swiper-slide-active [class*=animate__].animate__fadeInTopRight {
+  animation-name: fadeInTopRight;
+}
+.swiper-container .swiper-slide.swiper-slide-active [class*=animate__].animate__slideInUp {
+  animation-name: slideInUp;
+}
+.swiper-container .swiper-slide.swiper-slide-active [class*=animate__].animate__slideInDown {
+  animation-name: slideInDown;
+}
+.swiper-container .swiper-slide.swiper-slide-active [class*=animate__].animate__slideInLeft {
+  animation-name: slideInLeft;
+}
+.swiper-container .swiper-slide.swiper-slide-active [class*=animate__].animate__slideInRight {
+  animation-name: slideInRight;
+}
+.swiper-container .swiper-slide.swiper-slide-active [class*=animate__].animate__zoomIn {
+  animation-name: zoomIn;
+}
+.item-inner {
+  padding-inline: calc(var(--spacing) * 3);
+  padding-block: calc(var(--spacing) * 4);
+}
+.swiper-thumbs-container:not(.swiper-fullscreen) .swiper-main {
+  position: relative;
+}
+.swiper-thumbs-container:not(.swiper-fullscreen) .swiper:not(.swiper-thumbs) {
+  margin-bottom: calc(var(--spacing) * 2);
+}
+.swiper-thumbs-container:not(.swiper-fullscreen):not(.swiper-fullscreen) .swiper-thumbs .swiper-slide {
+  cursor: pointer;
+  opacity: 70%;
+}
+.swiper-thumbs-container:not(.swiper-fullscreen):not(.swiper-fullscreen) .swiper-thumbs .swiper-slide.swiper-slide-thumb-active {
+  opacity: 100%;
+}
+.swiper-static {
+  pointer-events: none;
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  z-index: 1000;
+  height: 100%;
+  width: 100%;
+}
+.swiper-wrapper.ticker {
+  --tw-ease: linear;
+  transition-timing-function: linear;
+}
+#offcanvas-cart {
+  width: calc(var(--spacing) * 80);
+}
+#offcanvas-search {
+  bottom: auto;
+  height: auto;
+}
+.offcanvas.bg-light {
+  background-color: #fefefe;
+  color: #60697b;
+}
+.offcanvas-body {
+  padding-block: calc(var(--spacing) * 0);
+}
+.offcanvas-nav .offcanvas-body {
+  flex-grow: 0;
+}
+.offcanvas:not(.offcanvas-nav) {
+  overflow-y: auto;
+}
+.offcanvas:not(.offcanvas-nav) .offcanvas-body {
+  overflow-y: unset;
+}
+.offcanvas-footer {
+  margin-top: auto;
+  display: flex;
+  flex-shrink: 0;
+  padding-inline: calc(var(--spacing) * 0);
+  padding-block: calc(var(--spacing) * 6);
+}
+img.svg-inject {
+  visibility: hidden;
+}
+.icon-svg {
+  height: calc(var(--spacing) * 12);
+  width: calc(var(--spacing) * 12);
+}
+.svg-bg {
+  display: inline-flex;
+  height: calc(var(--spacing) * 12);
+  width: calc(var(--spacing) * 12);
+  align-items: center;
+  justify-content: center;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.svg-bg .icon-svg {
+  height: 1.3rem;
+  width: 1.3rem;
+}
+.svg-bg.svg-bg-lg {
+  height: calc(var(--spacing) * 16);
+  width: calc(var(--spacing) * 16);
+}
+.svg-bg.svg-bg-lg .icon-svg {
+  height: calc(var(--spacing) * 6);
+  width: calc(var(--spacing) * 6);
+}
+.lineal-fill {
+  fill: #8caeec;
+}
+.lineal-stroke {
+  fill: #36496d;
+}
+.text-primary .lineal-fill {
+  fill: #8caeec;
+}
+.text-blue .lineal-fill {
+  fill: #8caeec;
+}
+.text-sky .lineal-fill {
+  fill: #9ed5f6;
+}
+.text-purple .lineal-fill {
+  fill: #acb2e3;
+}
+.text-grape .lineal-fill {
+  fill: #a09ed6;
+}
+.text-violet .lineal-fill {
+  fill: #c6b0dc;
+}
+.text-pink .lineal-fill {
+  fill: #e3a6b6;
+}
+.text-fuchsia .lineal-fill {
+  fill: #f0a4d1;
+}
+.text-red .lineal-fill {
+  fill: #eea1a6;
+}
+.text-orange .lineal-fill {
+  fill: #fab9ad;
+}
+.text-yellow .lineal-fill {
+  fill: #fcd49b;
+}
+.text-green .lineal-fill {
+  fill: #8fdcc6;
+}
+.text-leaf .lineal-fill {
+  fill: #b0d4c1;
+}
+.text-aqua .lineal-fill {
+  fill: #98cbdd;
+}
+.text-navy .lineal-fill {
+  fill: #858c97;
+}
+.text-ash .lineal-fill {
+  fill: #bfc2c8;
+}
+.solid .fill-primary,.solid .fill-secondary {
+  fill: #3f78e0;
+}
+.solid.text-blue .fill-primary,.solid.text-blue .fill-secondary {
+  fill: #3f78e0;
+}
+.solid.text-sky .fill-primary,.solid.text-sky .fill-secondary {
+  fill: #5eb9f0;
+}
+.solid.text-purple .fill-primary,.solid.text-purple .fill-secondary {
+  fill: #747ed1;
+}
+.solid.text-grape .fill-primary,.solid.text-grape .fill-secondary {
+  fill: #e31e24;
+}
+.solid.text-violet .fill-primary,.solid.text-violet .fill-secondary {
+  fill: #a07cc5;
+}
+.solid.text-pink .fill-primary,.solid.text-pink .fill-secondary {
+  fill: #d16b86;
+}
+.solid.text-fuchsia .fill-primary,.solid.text-fuchsia .fill-secondary {
+  fill: #e668b3;
+}
+.solid.text-red .fill-primary,.solid.text-red .fill-secondary {
+  fill: #e2626b;
+}
+.solid.text-orange .fill-primary,.solid.text-orange .fill-secondary {
+  fill: #f78b77;
+}
+.solid.text-yellow .fill-primary,.solid.text-yellow .fill-secondary {
+  fill: #fab758;
+}
+.solid.text-green .fill-primary,.solid.text-green .fill-secondary {
+  fill: #45c4a0 !important;
+}
+.solid.text-leaf .fill-primary,.solid.text-leaf .fill-secondary {
+  fill: #7cb798;
+}
+.solid.text-aqua .fill-primary,.solid.text-aqua .fill-secondary {
+  fill: #54a8c7;
+}
+.solid.text-navy .fill-primary,.solid.text-navy .fill-secondary {
+  fill: #343f52 !important;
+}
+.solid.text-ash .fill-primary,.solid.text-ash .fill-secondary {
+  fill: #9499a3;
+}
+.solid.text-light .fill-primary,.solid.text-light .fill-secondary {
+  fill: #fefefe;
+}
+.solid.text-gray .fill-primary,.solid.text-gray .fill-secondary {
+  fill: #f6f7f9;
+}
+.solid.text-dark .fill-primary,.solid.text-dark .fill-secondary {
+  fill: #262b32;
+}
+.solid.text-primary .fill-primary,.solid.text-primary .fill-secondary {
+  fill: #3f78e0;
+}
+.solid-mono .fill-primary {
+  fill: #3f78e0;
+}
+.solid-mono .fill-secondary {
+  fill: #b2c9f3;
+}
+.solid-mono.text-primary .fill-primary {
+  fill: #3f78e0;
+}
+.solid-mono.text-primary .fill-secondary {
+  fill: #b2c9f3;
+}
+.solid-mono.text-blue .fill-primary {
+  fill: #3f78e0;
+}
+.solid-mono.text-blue .fill-secondary {
+  fill: #b2c9f3;
+}
+.solid-mono.text-sky .fill-primary {
+  fill: #5eb9f0;
+}
+.solid-mono.text-sky .fill-secondary {
+  fill: #bfe3f9;
+}
+.solid-mono.text-purple .fill-primary {
+  fill: #747ed1;
+}
+.solid-mono.text-purple .fill-secondary {
+  fill: #c7cbed;
+}
+.solid-mono.text-grape .fill-primary {
+  fill: #e31e24;
+}
+.solid-mono.text-grape .fill-secondary {
+  fill: #bfbee3;
+}
+.solid-mono.text-violet .fill-primary {
+  fill: #a07cc5;
+}
+.solid-mono.text-violet .fill-secondary {
+  fill: #d9cbe8;
+}
+.solid-mono.text-pink .fill-primary {
+  fill: #d16b86;
+}
+.solid-mono.text-pink .fill-secondary {
+  fill: #edc4cf;
+}
+.solid-mono.text-fuchsia .fill-primary {
+  fill: #e668b3;
+}
+.solid-mono.text-fuchsia .fill-secondary {
+  fill: #f5c3e1;
+}
+.solid-mono.text-red .fill-primary {
+  fill: #e2626b;
+}
+.solid-mono.text-red .fill-secondary {
+  fill: #f3c0c4;
+}
+.solid-mono.text-orange .fill-primary {
+  fill: #f78b77;
+}
+.solid-mono.text-orange .fill-secondary {
+  fill: #fcd1c9;
+}
+.solid-mono.text-yellow .fill-primary {
+  fill: #fab758;
+}
+.solid-mono.text-yellow .fill-secondary {
+  fill: #fde2bc;
+}
+.solid-mono.text-green .fill-primary {
+  fill: #45c4a0;
+}
+.solid-mono.text-green .fill-secondary {
+  fill: #b5e7d9;
+}
+.solid-mono.text-leaf .fill-primary {
+  fill: #7cb798;
+}
+.solid-mono.text-leaf .fill-secondary {
+  fill: #cbe2d6;
+}
+.solid-mono.text-aqua .fill-primary {
+  fill: #54a8c7;
+}
+.solid-mono.text-aqua .fill-secondary {
+  fill: #bbdce9;
+}
+.solid-mono.text-navy .fill-primary {
+  fill: #343f52;
+}
+.solid-mono.text-navy .fill-secondary {
+  fill: #aeb2ba;
+}
+.solid-mono.text-ash .fill-primary {
+  fill: #9499a3;
+}
+.solid-mono.text-ash .fill-secondary {
+  fill: #d4d6da;
+}
+.solid-duo.text-purple-aqua .fill-primary {
+  fill: #747ed1 !important;
+}
+.solid-duo.text-purple-aqua .fill-secondary {
+  fill: #8ce0f1 !important;
+}
+.solid-duo.text-navy-green .fill-primary {
+  fill: #414b64;
+}
+.solid-duo.text-navy-green .fill-secondary {
+  fill: #45c4a0;
+}
+.solid-duo.text-grape-fuchsia .fill-primary {
+  fill: #e31e24;
+}
+.solid-duo.text-grape-fuchsia .fill-secondary {
+  fill: #f857a6;
+}
+.solid-duo.text-grape-green .fill-primary {
+  fill: #e31e24;
+}
+.solid-duo.text-grape-green .fill-secondary {
+  fill: #94dd8e;
+}
+.solid-duo.text-navy-sky .fill-primary {
+  fill: #414b64;
+}
+.solid-duo.text-navy-sky .fill-secondary {
+  fill: #5eb9f0;
+}
+.solid-duo.text-blue-pink .fill-primary {
+  fill: #3f78e0;
+}
+.solid-duo.text-purple-aqua .fill-secondary {
+  fill: #8ce0f1;
+}
+.solid-duo.text-blue-pink .fill-secondary {
+  fill: #fc7eb9;
+}
+.solid-duo.text-green-fuchsia .fill-primary {
+  fill: #8ed882;
+}
+.solid-duo.text-green-fuchsia .fill-secondary {
+  fill: #e668b3;
+}
+.solid-duo.text-grape-yellow .fill-primary {
+  fill: #e31e24;
+}
+.solid-duo.text-grape-yellow .fill-secondary {
+  fill: #fab758;
+}
+.solid-duo.text-sky-pink .fill-primary {
+  fill: #5eb9f0;
+}
+.solid-duo.text-sky-pink .fill-secondary {
+  fill: #ff98ab;
+}
+.solid-duo.text-purple-pink .fill-primary {
+  fill: #747ed1;
+}
+.solid-duo.text-purple-pink .fill-secondary {
+  fill: #fdb9d3;
+}
+.solid-duo.text-green-red .fill-primary {
+  fill: #45c4a0;
+}
+.solid-duo.text-green-red .fill-secondary {
+  fill: #ff7c94;
+}
+.solid-duo.text-red-yellow .fill-primary {
+  fill: #e54281;
+}
+.solid-duo.text-red-yellow .fill-secondary {
+  fill: #fab758;
+}
+.lineal-fill {
+  fill: #8caeec !important;
+}
+.lineal-stroke {
+  fill: #343f52 !important;
+}
+.text-aqua .lineal-fill {
+  fill: #98cbdd !important;
+}
+.text-green .lineal-fill {
+  fill: #8fdcc6 !important;
+}
+.text-leaf .lineal-fill {
+  fill: #b0d4c1 !important;
+}
+.text-navy .lineal-fill {
+  fill: #858c97 !important;
+}
+.text-orange .lineal-fill {
+  fill: #fab9ad !important;
+}
+.text-pink .lineal-fill {
+  fill: #e3a6b6 !important;
+}
+.text-purple .lineal-fill {
+  fill: #acb2e3 !important;
+}
+.text-red .lineal-fill {
+  fill: #eea1a6 !important;
+}
+.text-violet .lineal-fill {
+  fill: #c6b0dc !important;
+}
+.text-yellow .lineal-fill {
+  fill: #fcd49b !important;
+}
+.text-blue .lineal-fill {
+  fill: #8caeec !important;
+}
+.text-fuchsia .lineal-fill {
+  fill: #f0a4d1 !important;
+}
+.text-sky .lineal-fill {
+  fill: #9ed5f6 !important;
+}
+.text-grape .lineal-fill {
+  fill: #a09ed6 !important;
+}
+.solid-mono.text-primary .fill-primary {
+  fill: #3f78e0 !important;
+}
+.solid-mono.text-primary .fill-secondary {
+  fill: #b2c9f3 !important;
+}
+.solid-mono.text-aqua .fill-secondary {
+  fill: #bbdce9 !important;
+}
+.solid-mono.text-aqua .fill-primary {
+  fill: #54a8c7 !important;
+}
+.solid-mono.text-green .fill-secondary {
+  fill: #b5e7d9 !important;
+}
+.solid-mono.text-green .fill-primary {
+  fill: #45c4a0 !important;
+}
+.solid-mono.text-leaf .fill-secondary {
+  fill: #cbe2d6 !important;
+}
+.solid-mono.text-leaf .fill-primary {
+  fill: #7cb798 !important;
+}
+.solid-mono.text-navy .fill-secondary {
+  fill: #aeb2ba !important;
+}
+.solid-mono.text-navy .fill-primary {
+  fill: #343f52 !important;
+}
+.solid-mono.text-orange .fill-secondary {
+  fill: #fcd1c9 !important;
+}
+.solid-mono.text-orange .fill-primary {
+  fill: #f78b77 !important;
+}
+.solid-mono.text-pink .fill-secondary {
+  fill: #edc4cf !important;
+}
+.solid-mono.text-pink .fill-primary {
+  fill: #d16b86 !important;
+}
+.solid-mono.text-purple .fill-secondary {
+  fill: #c7cbed !important;
+}
+.solid-mono.text-purple .fill-primary {
+  fill: #747ed1 !important;
+}
+.solid-mono.text-red .fill-secondary {
+  fill: #f3c0c4 !important;
+}
+.solid-mono.text-red .fill-primary {
+  fill: #e2626b !important;
+}
+.solid-mono.text-violet .fill-secondary {
+  fill: #d9cbe8 !important;
+}
+.solid-mono.text-violet .fill-primary {
+  fill: #a07cc5 !important;
+}
+.solid-mono.text-yellow .fill-secondary {
+  fill: #fde2bc !important;
+}
+.solid-mono.text-yellow .fill-primary {
+  fill: #fab758 !important;
+}
+.solid-mono.text-blue .fill-secondary {
+  fill: #b2c9f3 !important;
+}
+.solid-mono.text-blue .fill-primary {
+  fill: #3f78e0 !important;
+}
+.solid-mono.text-fuchsia .fill-secondary {
+  fill: #f5c3e1 !important;
+}
+.solid-mono.text-fuchsia .fill-primary {
+  fill: #e668b3 !important;
+}
+.solid-mono.text-sky .fill-secondary {
+  fill: #bfe3f9 !important;
+}
+.solid-mono.text-sky .fill-primary {
+  fill: #5eb9f0 !important;
+}
+.solid-mono.text-grape .fill-secondary {
+  fill: #bfbee3 !important;
+}
+.solid-mono.text-grape .fill-primary {
+  fill: #e31e24 !important;
+}
+.shape.grape .svg-fill {
+  fill: #e31e24;
+}
+.shape.fuchsia .svg-fill {
+  fill: #e668b3;
+}
+.shape.violet .svg-fill {
+  fill: #a07cc5;
+}
+.shape.yellow .svg-fill {
+  fill: #fab758;
+}
+.shape.leaf .svg-fill {
+  fill: #7cb798;
+}
+.shape.pale-primary .svg-fill {
+  fill: #e0e9fa;
+}
+.text-fuchsia .lineal-fill {
+  fill: #f0a4d1;
+}
+.text-aqua .lineal-fill {
+  fill: #98cbdd;
+}
+.text-yellow .lineal-fill {
+  fill: #fcd49b;
+}
+.text-leaf .lineal-fill {
+  fill: #b0d4c1;
+}
+.text-orange .lineal-fill {
+  fill: #fab9ad;
+}
+.text-grape .lineal-fill {
+  fill: #a09ed6;
+}
+.ratings.one:after {
+  --tw-content: "\2605";
+  content: var(--tw-content);
+}
+.ratings.two:after {
+  --tw-content: "\2605\2605";
+  content: var(--tw-content);
+}
+.ratings.three:after {
+  --tw-content: "\2605\2605\2605";
+  content: var(--tw-content);
+}
+.ratings.four:after {
+  --tw-content: "\2605\2605\2605\2605";
+  content: var(--tw-content);
+}
+.custom-control .ratings {
+  height: 0.9rem;
+}
+[class*=" icn-"],[class*=" uil-"],[class^=icn-],[class^=uil-] {
+  --tw-font-weight: var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
+  text-transform: none;
+  font-style: normal;
+  speak: none;
+  font-variant: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  word-spacing: normal;
+}
+[class*=" uil-"],[class^=uil-] {
+  font-family: var(--font-Unicons) !important;
+}
+[class*=" icn-"],[class^=icn-] {
+  font-family: var(--font-Custom) !important;
+}
+.uil-eye:before {
+  --tw-content: "\eae1";
+  content: var(--tw-content);
+}
+.uil-eye-slash:before {
+  --tw-content: "\eae0";
+  content: var(--tw-content);
+}
+.icn-caret-right:before {
+  --tw-content: "\e900";
+  content: var(--tw-content);
+}
+.icn-comment-line:before {
+  --tw-content: "\e904";
+  content: var(--tw-content);
+}
+.icn-external:before {
+  --tw-content: "\e906";
+  content: var(--tw-content);
+}
+.icn-terminal:before {
+  --tw-content: "\e905";
+  content: var(--tw-content);
+}
+.counter-wrapper .card-body {
+  padding: calc(var(--spacing) * 6);
+}
+.counter-wrapper .icon-bg {
+  margin-inline: auto;
+  margin-block: calc(var(--spacing) * 0);
+}
+figure.overlay img {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  vertical-align: top;
+  opacity: 100%;
+}
+.overlay {
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  transform: translate3d(0,0,0);
+}
+.overlay * {
+  color: var(--color-white);
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.4s;
+  transition-duration: 0.4s;
+  --tw-ease: ease;
+  transition-timing-function: ease;
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.overlay img {
+  max-width: 100%;
+  vertical-align: top;
+  transition-property: none;
+}
+.overlay:not(.caption-overlay) i {
+  display: block;
+  font-size: calc(1.265rem + 0.18vw);
+}
+.overlay span.bg {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: 4;
+  display: block;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  background-color: rgba(30,34,40,.6);
+  opacity: 0%;
+}
+.overlay.color span.bg {
+  background-color: rgba(63,120,224,.7);
+}
+.overlay.light span.bg {
+  background-color: rgba(255,255,255,.6);
+}
+.overlay.overlay-gradient-1 span.bg {
+  background-image: linear-gradient(120deg,#f857a6 10%,#ef3f6e 100%);
+}
+.overlay.overlay-gradient-2 span.bg {
+  background-image: linear-gradient(40deg,#f5b161 .4%,#ec366e 100.2%);
+}
+.overlay.overlay-gradient-3 span.bg {
+  background-image: linear-gradient(45deg,#fbda61 0,#ff5acd 100%);
+}
+.overlay.overlay-gradient-4 span.bg {
+  background-image: linear-gradient(125deg,#9040db,#ff72c2 50%,#ffd84f);
+}
+.overlay.overlay-gradient-5 span.bg {
+  background-image: linear-gradient(43deg,#4158d0 0,#c850c0 46%,#ffcc70 100%);
+}
+.overlay.overlay-gradient-6 span.bg {
+  background-image: linear-gradient(45deg,#08aeea 0,#2af598 100%);
+}
+.overlay.overlay-gradient-7 span.bg {
+  background-image: linear-gradient(100deg,#e31e24 20%,#3f78e0 85%);
+}
+.overlay.overlay-gradient-8 span.bg {
+  background-image: linear-gradient(0deg,#2c46a7,#3757c4);
+}
+.overlay.overlay-gradient-9 span.bg {
+  background-image: linear-gradient(45deg,#ffdee9,#b5fffc);
+}
+.overlay:not(.overlay-3):hover span.bg {
+  opacity: 100%;
+  transition-property: opacity;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.35s;
+  transition-duration: 0.35s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: none;
+  }
+}
+.overlay.light * {
+  color: #343f52;
+}
+.overlay img {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.overlay.caption figcaption {
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: calc(var(--spacing) * 6);
+  text-align: left;
+  opacity: 100%;
+}
+.overlay.caption figcaption .post-meta {
+  display: flex;
+  flex-direction: row;
+}
+.overlay.caption figcaption .post-meta>li {
+  display: flex;
+  align-items: center;
+}
+.overlay.caption figcaption .badge {
+  color: #343f52;
+}
+.overlay.caption.caption-overlay span.bg {
+  background-color: inherit;
+  opacity: 100%;
+  &::after {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::after {
+    content: var(--tw-content);
+    top: calc(var(--spacing) * 0);
+  }
+  &::after {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 0);
+  }
+  &::after {
+    content: var(--tw-content);
+    height: 100%;
+  }
+  &::after {
+    content: var(--tw-content);
+    width: 100%;
+  }
+  &::after {
+    content: var(--tw-content);
+    opacity: 0%;
+  }
+  &::after {
+    content: var(--tw-content);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-duration: 0.4s;
+    transition-duration: 0.4s;
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-ease: ease;
+    transition-timing-function: ease;
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  &:hover {
+    @media (hover: hover) {
+      &::after {
+        content: var(--tw-content);
+        opacity: 100%;
+      }
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      content: var(--tw-content);
+      transition-property: none;
+    }
+  }
+  background: rgba(30,34,40,0) linear-gradient(transparent 15%,transparent 20%,rgba(30,34,40,.3) 55%,rgba(30,34,40,.7) 85%,rgba(30,34,40,.75) 100%) repeat scroll 0 0;
+}
+.overlay.caption.caption-overlay span.bg:after {
+  background-color: rgba(30,34,40,.2);
+}
+.overlay-1 * {
+  box-sizing: border-box;
+}
+.overlay-1:hover .figcaption *,.overlay-1:hover figcaption * {
+  --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.overlay-2 * {
+  position: absolute;
+  left: calc(var(--spacing) * 0);
+  margin: calc(var(--spacing) * 0);
+  width: 100%;
+  text-align: center;
+}
+.overlay-2>* {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  height: 100%;
+}
+.overlay-2 figcaption {
+  height: 100%;
+  opacity: 0%;
+}
+.overlay-2 img {
+  position: relative;
+}
+.overlay-2 .from-top {
+  bottom: calc(2/4 * 100%);
+  padding-inline: calc(var(--spacing) * 4);
+  padding-block: calc(var(--spacing) * 0);
+  transform: translate3d(0,-100%,0);
+}
+.overlay-2 .from-bottom {
+  top: calc(2/4 * 100%);
+  padding-inline: calc(var(--spacing) * 4);
+  padding-block: calc(var(--spacing) * 0);
+  transform: translate3d(0,100%,0);
+}
+.overlay-2:hover * {
+  opacity: 100%;
+}
+.overlay-2:hover figcaption * {
+  transform: translate3d(0,0,0);
+}
+.overlay-3 span.bg {
+  visibility: hidden;
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  display: block;
+  height: 100%;
+  width: calc(var(--spacing) * 0);
+  opacity: 0%;
+}
+.overlay-3:hover span.bg {
+  visibility: visible;
+  width: 100%;
+  opacity: 80%;
+}
+.overlay-3:hover .figcaption .from-left, .overlay-3:hover figcaption .from-left {
+  opacity: 100%;
+  transform: translate3d(0,0,0);
+}
+.overlay-3 figcaption {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding-inline: calc(var(--spacing) * 5);
+  padding-block: calc(var(--spacing) * 4);
+  opacity: 0%;
+}
+.overlay-3 .from-left {
+  opacity: 0;
+  transition: opacity .4s,transform .4s;
+  transform: translate3d(-10%,0,0);
+}
+.overlay-3 .from-left:nth-child(1) {
+  transition-delay: 0.15s;
+}
+.overlay-3 .from-left:nth-child(2) {
+  transition-delay: 0.2s;
+}
+.overlay-3:hover .figcaption,.overlay-3:hover figcaption {
+  opacity: 100%;
+}
+.overlay-3:hover .figcaption .from-left,.overlay-3:hover figcaption .from-left {
+  opacity: 100%;
+  transform: translate3d(0,0,0);
+}
+.hover-scale {
+  --tw-translate-y: calc(var(--spacing) * 0);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  overflow: hidden;
+}
+.lift {
+  --tw-translate-y: calc(var(--spacing) * 0);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.3s;
+  transition-duration: 0.3s;
+  --tw-ease: ease;
+  transition-timing-function: ease;
+  &:hover {
+    @media (hover: hover) {
+      --tw-translate-y: -0.4rem;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  &:hover {
+    @media (hover: hover) {
+      --tw-shadow: 0 0.25rem 1.25rem var(--tw-shadow-color, rgba(52,63,82,0.1));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+}
+video.player {
+  max-width: 100%;
+}
+.plyr__control--overlaid {
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: var(--color-white);
+  padding: calc(var(--spacing) * 5);
+  color: #343f52;
+  opacity: 100%;
+  --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.plyr__control--overlaid:focus, .plyr__control--overlaid:hover {
+  background-color: var(--color-white) !important;
+  color: #3f78e0 !important;
+  --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 0.2s;
+  transition-duration: 0.2s;
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
+}
+.plyr__control--overlaid::after, .plyr__control--overlaid::before {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: -1;
+  display: block;
+  animation: ripple-1 2s infinite ease-in-out;
+  border-radius: 50%;
+  background-color: var(--color-white);
+  opacity: 80%;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.plyr--full-ui *, .plyr--full-ui :after, .plyr--full-ui :before {
+  box-sizing: inherit;
+}
+.plyr__control--overlaid::after {
+  animation: ripple-2 2s infinite ease-in-out !important;
+  animation-delay: .5s !important;
+}
+.plyr__control--overlaid::after, .plyr__control--overlaid::before {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: -1;
+  display: block;
+  animation: ripple-1 2s infinite ease-in-out;
+  border-radius: 50%;
+  background-color: var(--color-white);
+  opacity: 80%;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.pricing-wrapper [class*=xl\:w-] {
+  z-index: 1;
+}
+.pricing-wrapper [class*=xl\:w-].popular {
+  z-index: 3;
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .card-body {
+  margin-inline: auto;
+  padding-block: calc(var(--spacing) * 12);
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .card-body .icon {
+  margin-bottom: calc(var(--spacing) * 3);
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .card-body .card-title {
+  margin-inline: calc(var(--spacing) * 0);
+  margin-top: calc(var(--spacing) * 0);
+  margin-bottom: calc(var(--spacing) * 2);
+  padding: calc(var(--spacing) * 0);
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .prices {
+  position: relative;
+  margin: calc(var(--spacing) * 0);
+  height: 2.3rem;
+  background-color: inherit;
+  padding: calc(var(--spacing) * 0);
+  --tw-leading: 1;
+  line-height: 1;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .prices .price-value {
+  font-size: calc(1.365rem + 1.38vw);
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .prices .price-currency {
+  display: inline-block;
+  padding-top: 0.4rem;
+  padding-right: 0.2rem;
+  font-size: 1rem;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .prices .price-duration {
+  margin-top: auto;
+  margin-bottom: calc(var(--spacing) * 1);
+  font-size: 0.8rem;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  color: #60697b;
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .prices .price-duration:before {
+  padding: calc(var(--spacing) * 0);
+  --tw-content: "/";
+  content: var(--tw-content);
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .prices .price {
+  position: absolute;
+  inset-inline: calc(var(--spacing) * 0);
+  display: flex;
+  justify-content: center;
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .prices .price-hidden {
+  display: none;
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .prices .price-show {
+  animation: priceShow 0.6s forwards;
+}
+.pricing-wrapper [class*=xl\:w-] .pricing.card .prices .price-hide {
+  animation: priceFade 0.6s forwards;
+}
+.pricing-switcher-wrapper p:last-child {
+  position: relative;
+}
+.pricing-switcher-wrapper p:last-child .badge {
+  position: absolute;
+  top: -1rem;
+  right: -2rem;
+}
+.pricing-switchers .pricing-switcher:nth-child(1).pricing-switcher-active~.switcher-button {
+  left: calc(var(--spacing) * 0);
+}
+.pricing-switchers .pricing-switcher:nth-child(2).pricing-switcher-active~.switcher-button {
+  left: calc(2/4 * 100%);
+}
+.pricing-switchers .pricing-switcher.pricing-switcher-active {
+  color: var(--color-white);
+}
+.switcher-dark .pricing-switchers {
+  background-color: rgba(255,255,255,0.06);
+}
+.timeline .timeline-item .timeline-content p:last-child {
+  margin: calc(var(--spacing) * 0);
+}
+.timeline .timeline-item .timeline-marker {
+  position: absolute;
+  inset-block: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  width: 0.6rem;
+  color: #3f78e0;
+  &::before {
+    content: var(--tw-content);
+    top: 0.2rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 0);
+  }
+  &::before {
+    content: var(--tw-content);
+    height: 0.55rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    width: 0.55rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    border-radius: 100%;
+  }
+  &::after {
+    content: var(--tw-content);
+    top: calc(var(--spacing) * 4);
+  }
+  &::after {
+    content: var(--tw-content);
+    bottom: calc(var(--spacing) * 0);
+  }
+  &::after {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 1);
+  }
+  &::after {
+    content: var(--tw-content);
+    width: 1px;
+  }
+  @media (width >= 768px) {
+    position: relative;
+  }
+}
+.timeline .timeline-item .timeline-marker:after,.timeline .timeline-item .timeline-marker:before {
+  position: absolute;
+  display: block;
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.timeline .timeline-item .timeline-marker {
+  &::before {
+    content: var(--tw-content);
+    background-color: currentColor;
+  }
+}
+.timeline .timeline-item .timeline-marker:after {
+  background-color: rgba(164,174,198,.2);
+}
+.timeline .timeline-item:last-child .timeline-content {
+  padding-bottom: calc(var(--spacing) * 0);
+}
+.timeline .timeline-item:last-child .timeline-marker:after {
+  --tw-content: none;
+  content: none;
+}
+.projects-tiles .project:first-child {
+  margin-top: calc(var(--spacing) * 0);
+}
+.projects-overflow .project-details {
+  width: 100%;
+}
+.projects-overflow .item {
+  position: relative;
+  margin-top: calc(var(--spacing) * 10);
+  &:first-child {
+    margin-top: calc(var(--spacing) * 0);
+  }
+}
+.item figure,.swiper-slide figure {
+  position: relative;
+}
+.item figure .item-like:hover,.item figure .item-link:hover,.item figure .item-view:hover,.swiper-slide figure .item-like:hover,.swiper-slide figure .item-link:hover,.swiper-slide figure .item-view:hover {
+  background-color: rgba(255,255,255,.9);
+}
+.item figure .item-view,.swiper-slide figure .item-view {
+  top: 3.7rem;
+  bottom: auto;
+}
+.white-tooltip .tooltip-inner {
+  max-width: 200px;
+  border-radius: 0.4rem;
+  background-color: var(--color-white);
+  padding-inline: calc(var(--spacing) * 2);
+  padding-block: 0.35rem;
+  font-size: 0.7rem;
+  color: #343f52;
+}
+.shop figure {
+  overflow: hidden;
+  transform: translate3d(0,0,0);
+}
+.shopping-cart .shopping-cart-item .price {
+  margin-bottom: 0.4rem;
+}
+table.shopping-cart td {
+  padding-block: 1.2rem;
+  vertical-align: middle;
+}
+.position-relative .shape.rellax+figure {
+  position: relative;
+  z-index: 2;
+}
+.bg-dot {
+  background-size: 0.75rem 0.75rem;
+}
+.bg-line.red {
+  background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) .8px,#e2626b 1.6px,#e2626b 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);
+}
+.bg-line.green {
+  background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) .8px,#45c4a0 1.6px,#45c4a0 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);
+}
+.bg-line.leaf {
+  background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) .8px,#7cb798 1.6px,#7cb798 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);
+}
+.bg-line.aqua {
+  background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) .8px,#54a8c7 1.6px,#54a8c7 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);
+}
+.bg-line.yellow {
+  background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) .8px,#fab758 1.6px,#fab758 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);
+}
+.bg-line.blue {
+  background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) .8px,#3f78e0 1.6px,#3f78e0 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);
+}
+.bg-dot.sky {
+  background-image: radial-gradient(#5eb9f0 2px,transparent 2.5px);
+}
+.bg-dot.purple {
+  background-image: radial-gradient(#747ed1 2px,transparent 2.5px);
+}
+.bg-dot.grape {
+  background-image: radial-gradient(#e31e24 2px,transparent 2.5px);
+}
+.bg-dot.violet {
+  background-image: radial-gradient(#a07cc5 2px,transparent 2.5px);
+}
+.bg-dot.pink {
+  background-image: radial-gradient(#d16b86 2px,transparent 2.5px);
+}
+.bg-dot.fuchsia {
+  background-image: radial-gradient(#e668b3 2px,transparent 2.5px);
+}
+.bg-dot.yellow {
+  background-image: radial-gradient(#fab758 2px, transparent 2.5px);
+}
+.bg-dot.blue {
+  background-image: radial-gradient(#3f78e0 2px, transparent 2.5px);
+}
+.bg-line.primary {
+  background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) .8px,#3f78e0 1.6px,#3f78e0 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);
+}
+.bg-line.purple {
+  background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) 0.8px,#747ed1 1.6px,#747ed1 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);
+}
+.bg-dot.orange {
+  background-image: radial-gradient(#f78b77 2px,transparent 2.5px);
+}
+.bg-dot.leaf {
+  background-image: radial-gradient(#7cb798 2px,transparent 2.5px);
+}
+.bg-dot.aqua {
+  background-image: radial-gradient(#54a8c7 2px,transparent 2.5px);
+}
+.bg-dot.navy {
+  background-image: radial-gradient(#343f52 2px,transparent 2.5px);
+}
+.bg-dot.ash {
+  background-image: radial-gradient(#9499a3 2px,transparent 2.5px);
+}
+.bg-dot.white {
+  background-image: radial-gradient(#ffffff 2px,transparent 2.5px);
+}
+.bg-dot.light {
+  background-image: radial-gradient(#fefefe 2px,transparent 2.5px);
+}
+.bg-dot.gray {
+  background-image: radial-gradient(#f6f7f9 2px,transparent 2.5px);
+}
+.bg-dot.dark {
+  background-image: radial-gradient(#262b32 2px,transparent 2.5px);
+}
+.blog.single .post {
+  margin-bottom: calc(var(--spacing) * 0);
+}
+footer [class*=col-] .widget+.widget {
+  margin-top: calc(var(--spacing) * 4);
+}
+.sidebar nav .nav-link {
+  padding: calc(var(--spacing) * 0);
+  --tw-leading: inherit;
+  line-height: inherit;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  color: inherit;
+}
+.sidebar nav .nav-link.active {
+  color: #3f78e0 !important;
+}
+.list-unstyled li a.active {
+  color: #3f78e0 !important;
+}
+#comments ul.children {
+  margin-inline: calc(var(--spacing) * 0);
+  margin-top: calc(var(--spacing) * 8);
+  margin-bottom: calc(var(--spacing) * 0);
+  list-style-type: none;
+  padding-block: calc(var(--spacing) * 0);
+  padding-right: calc(var(--spacing) * 0);
+  padding-left: calc(var(--spacing) * 14);
+}
+#comments ul.children li.comment {
+  position: relative;
+  &::before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::before {
+    content: var(--tw-content);
+    top: -1.25rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    left: -2.5rem;
+  }
+  &::before {
+    content: var(--tw-content);
+    display: block;
+  }
+  &::before {
+    content: var(--tw-content);
+    font-family: var(--font-Custom);
+  }
+  &::before {
+    content: var(--tw-content);
+    font-size: calc(1.325rem + 0.9vw);
+  }
+  &::before {
+    content: var(--tw-content);
+    color: rgba(164,174,198,0.25);
+  }
+  &::before {
+    content: var(--tw-content);
+    --tw-content: "\e904";
+    content: var(--tw-content);
+  }
+}
+#comments .post-meta {
+  margin: calc(var(--spacing) * 0);
+}
+.author-info .h6,.author-info h6 {
+  margin-bottom: 0.2rem;
+}
+#comments .post-meta li:before {
+  margin-block: calc(var(--spacing) * 0);
+  margin-right: 0.6rem;
+  margin-left: 0.4rem;
+}
+.wrapper-border.bg-dark {
+  border-color: rgba(255,255,255,0.08);
+}
+.footer.bg-dark,footer.bg-dark {
+  background-color: #21262c !important;
+}
+.image-wrapper.bg-overlay.bg-content .content,.image-wrapper.bg-overlay:not(.bg-content) * {
+  position: relative;
+  z-index: 2;
+}
+.image-wrapper.bg-overlay .form-floating>label {
+  position: absolute;
+}
+.video-wrapper.bg-overlay {
+  &::after {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  &::after {
+    content: var(--tw-content);
+    top: calc(var(--spacing) * 0);
+  }
+  &::after {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 0);
+  }
+  &::after {
+    content: var(--tw-content);
+    z-index: 1;
+  }
+  &::after {
+    content: var(--tw-content);
+    display: block;
+  }
+  &::after {
+    content: var(--tw-content);
+    height: 100%;
+  }
+  &::after {
+    content: var(--tw-content);
+    width: 100%;
+  }
+  &::after {
+    content: var(--tw-content);
+    background-color: rgba(30,34,40,.4);
+  }
+  &::after {
+    content: var(--tw-content);
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+}
+.video-wrapper.bg-overlay.bg-overlay-gradient {
+  &::after {
+    content: var(--tw-content);
+    background-image: linear-gradient(120deg,#542461 50%,#332487 100%);
+  }
+  &::after {
+    content: var(--tw-content);
+    opacity: 40%;
+  }
+}
+.video-wrapper video {
+  position: absolute;
+  top: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  display: block;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  background-color: var(--color-black);
+  object-fit: cover;
+}
+.video-wrapper video:-webkit-media-controls {
+  display: none;
+}
+.video-wrapper .video-content {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.goverlay {
+  background-color: rgba(30,34,40,.9) !important;
+}
+@media (min-width:576px) {
+  .container,.container-sm {
+    max-width: 540px;
+  }
+}
+@media (min-width:768px) {
+  .container,.container-md,.container-sm {
+    max-width: 720px;
+  }
+}
+@media (min-width:992px) {
+  .container,.container-lg,.container-md,.container-sm {
+    max-width: 960px;
+  }
+}
+@media (min-width:1200px) {
+  .container,.container-lg,.container-md,.container-sm,.container-xl {
+    max-width: 1140px;
+  }
+}
+@media (min-width:1400px) {
+  .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
+    max-width: 1320px;
+  }
+}
+.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
+  margin-inline: auto;
+  width: 100%;
+  padding-inline: 15px;
+}
+@media (max-width:575.98px) and (min-width:1200px) {
+  .navbar-expand-sm .navbar-other .nav-item .nav-link>i {
+    font-size: 1.3rem;
+  }
+}
+@media (max-width:767.98px) and (min-width:1200px) {
+  .navbar-expand-md .navbar-other .nav-item .nav-link>i {
+    font-size: 1.3rem;
+  }
+}
+@media (max-width:991.98px) and (min-width:1200px) {
+  .navbar-expand-lg .navbar-other .nav-item .nav-link>i {
+    font-size: 1.3rem;
+  }
+}
+@media (max-width:1199.98px) and (min-width:1200px) {
+  .navbar-expand-xl .navbar-other .nav-item .nav-link>i {
+    font-size: 1.3rem;
+  }
+}
+@media (max-width:1399.98px) and (min-width:1200px) {
+  .navbar-expand-xxl .navbar-other .nav-item .nav-link>i {
+    font-size: 1.3rem;
+  }
+}
+@media (min-width:1550px) {
+  .box-layout {
+    position: relative;
+    background-color: #edeef1;
+  }
+}
+@media (min-width:1480px) {
+  .container-card {
+    margin-inline: auto;
+    margin-block: calc(var(--spacing) * 0);
+    max-width: 1470px;
+  }
+  .container-card>.card,.container-card>.card.image-wrapper:before {
+    border-radius: 0.8rem;
+  }
+}
+@media (min-width:1024px) {
+  .swiper-auto .swiper-slide {
+    width: 850px !important;
+  }
+  .swiper-auto.swiper-auto-xs .swiper-slide {
+    width: 600px !important;
+  }
+}
+@media (min-width:1400px) {
+  .navbar-expand-xxl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xxl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xxl .navbar-nav .nav-link {
+    padding-inline: 1rem;
+  }
+  .navbar-expand-xxl .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-xxl .navbar-collapse {
+    display: flex;
+    flex-basis: auto;
+  }
+  .navbar-expand-xxl .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas {
+    visibility: visible;
+    position: static;
+    z-index: auto;
+    height: auto;
+    width: auto;
+    flex-grow: 1;
+    transform: none !important;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: none;
+  }
+  .navbar-expand-xxl .offcanvas .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    overflow-y: visible;
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xxl.navbar-light .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+    color: #3f78e0;
+  }
+  .navbar-expand-xxl .dropdown-mega,.navbar-expand-xxl .navbar-nav {
+    position: static;
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu.dropdown-lg {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: 1.6rem;
+    padding-bottom: 1.3rem;
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu.dropdown-lg .dropdown-lg-content {
+    display: flex;
+    flex-direction: row;
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu.dropdown-lg .dropdown-header {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu:before {
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    z-index: -1;
+    display: block;
+    height: 100%;
+    width: 100%;
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu .dropdown-toggle:after {
+    position: absolute;
+    top: 0.15rem;
+    right: calc(var(--spacing) * 4);
+    margin-right: calc(var(--spacing) * 0);
+    font-size: 0.85rem;
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu.mega-menu {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .navbar-expand-xxl:not(.hover-none) .navbar-nav .dropdown-menu {
+    pointer-events: none;
+    visibility: hidden;
+    top: 120%;
+    display: block;
+    opacity: 0%;
+  }
+  .navbar-expand-xxl:not(.hover-none) .navbar-nav .dropdown:not(.dropdown-submenu):hover>.dropdown-menu {
+    visibility: visible;
+    top: 100%;
+    opacity: 100%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.25s;
+    transition-duration: 0.25s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    pointer-events: all;
+  }
+  .navbar-expand-xxl:not(.hover-none) .navbar-nav .dropdown-submenu {
+    position: relative;
+  }
+  .navbar-expand-xxl:not(.hover-none) .navbar-nav .dropdown-submenu .dropdown-menu {
+    top: 30%;
+  }
+  .navbar-expand-xxl:not(.hover-none) .navbar-nav .dropdown-submenu.dropstart:before {
+    position: absolute;
+    left: -1rem;
+    z-index: -1;
+    display: block;
+    height: 100%;
+    width: 100%;
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .navbar-expand-xxl:not(.hover-none) .navbar-nav .dropdown-submenu:hover>.dropdown-menu {
+    visibility: visible;
+    top: calc(var(--spacing) * 0);
+    opacity: 100%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.25s;
+    transition-duration: 0.25s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    pointer-events: all;
+  }
+  .navbar-expand-xxl .dropend>.dropdown-menu {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-xxl .dropstart>.dropdown-menu {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-xxl .offcanvas-nav {
+    flex-direction: row;
+    position: unset;
+  }
+  .navbar-expand-xxl .offcanvas-nav.offcanvas-end,.navbar-expand-xxl .offcanvas-nav.offcanvas-start {
+    width: 100%;
+  }
+  .navbar-expand-xxl.extended.navbar-bg-light:not(.fixed),.navbar-expand-xxl.fancy.navbar-bg-light:not(.fixed) {
+    background-color: inherit !important;
+  }
+  .navbar-expand-xxl.extended:not(.fixed) .navbar-collapse .nav-link {
+    padding-block: 1.15rem;
+  }
+  .navbar-expand-xxl.fancy:not(.fixed) .navbar-collapse .nav-link {
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .navbar-expand-xxl[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
+    padding-block: 1.7rem;
+  }
+  .navbar-expand-xxl.extended .navbar-collapse-wrapper,.navbar-expand-xxl.fancy .navbar-collapse-wrapper {
+    width: 100%;
+    border-radius: 0.4rem;
+    --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.02));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .navbar-expand-xxl.extended:not(.extended-alt):not(.fixed) .navbar-collapse-wrapper {
+    padding-block: calc(var(--spacing) * 0);
+    padding-right: calc(var(--spacing) * 6);
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-xxl.extended.extended-alt:not(.fixed) .navbar-collapse-wrapper {
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xxl.fancy:not(.fixed) .navbar-collapse-wrapper {
+    margin-top: calc(var(--spacing) * 9);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xxl.extended:not(.extended-alt) .navbar-brand {
+    padding-block: calc(var(--spacing) * 6);
+  }
+  .navbar-expand-xxl.extended.extended-alt .navbar-brand {
+    padding-block: calc(var(--spacing) * 7);
+  }
+  .navbar-expand-xxl.fixed .topbar {
+    display: none;
+  }
+  .navbar-expand-xxl.navbar-dark:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand-xxl.navbar-light:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand-xxl.transparent.fixed .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-xxl .navbar-collapse .nav-link {
+    white-space: nowrap;
+  }
+  .navbar-expand-xxl .navbar-collapse .nav-item.parent-link {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .navbar-expand-xxl .navbar-collapse .nav-item.parent-link>.nav-link:first-child {
+    padding-right: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xxl .navbar-collapse .nav-item.parent-link .dropdown-toggle {
+    padding-left: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xxl .dropdown-lg-content>div+div,.navbar-expand-xxl .mega-menu-content>.row>[class*=col-]+[class*=col-] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-left-color: rgba(164,174,198,0.2);
+  }
+  .navbar-expand-xxl .mega-menu-content {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: 0.6rem;
+    padding-bottom: 0.2rem;
+  }
+  .navbar-expand-xxl .mega-menu-dark {
+    background-color: #2e353e;
+  }
+  .navbar-expand-xxl .mega-menu-dark .img-svg {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    background-color: rgba(255,255,255,.05);
+  }
+  .navbar-expand-xxl .mega-menu-dark .img-svg:hover {
+    background-color: rgba(255,255,255,.09);
+  }
+  .navbar-expand-xxl .mega-menu-dark .dropdown-item {
+    color: var(--color-white);
+  }
+  .navbar-expand-xxl .mega-menu-dark .dropdown-item:focus,.navbar-expand-xxl .mega-menu-dark .dropdown-item:hover {
+    color: var(--color-white);
+  }
+  .navbar-expand-xxl .mega-menu-img {
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xxl .mega-menu-img .mega-menu-content {
+    margin-inline: calc(var(--spacing) * 0);
+    margin-block: 1.8rem;
+    padding-inline: calc(var(--spacing) * 8);
+    padding-block: 0.2rem;
+  }
+  .navbar-expand-xxl .mega-menu-img .dropdown-item {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xxl.caret-none .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+    display: none;
+  }
+  .mega-menu-scroll {
+    height: 30.6rem;
+  }
+}
+@media (min-width:1200px) and (max-width:1399.98px) {
+  .mega-menu-scroll {
+    height: 26.2rem;
+  }
+}
+@media (min-width:1200px) {
+  .navbar-expand-xl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xl .navbar-nav .nav-link {
+    padding-inline: 1rem;
+  }
+  .navbar-expand-xl .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-xl .navbar-collapse {
+    display: flex;
+    flex-basis: auto;
+  }
+  .navbar-expand-xl .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-xl .offcanvas {
+    visibility: visible;
+    position: static;
+    z-index: auto;
+    height: auto;
+    width: auto;
+    flex-grow: 1;
+    transform: none !important;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: none;
+  }
+  .navbar-expand-xl .offcanvas .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-xl .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    overflow-y: visible;
+    padding: calc(var(--spacing) * 0);
+  }
+  .modal-xl {
+    width: 1140px;
+  }
+  .glyphs li i:before {
+    font-size: 1.6rem;
+  }
+  .btn.btn-block.btn-lg {
+    font-size: 1.4rem !important;
+  }
+  .btn.btn-expand i {
+    font-size: 1.35rem;
+  }
+  .btn.btn-expand.btn-lg i {
+    font-size: 1.35rem;
+  }
+  .navbar-expand-xl.navbar-light .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+    color: #3f78e0;
+  }
+  .navbar-expand-xl .dropdown-mega,.navbar-expand-xl .navbar-nav {
+    position: static;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu.dropdown-lg {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: 1.6rem;
+    padding-bottom: 1.3rem;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu.dropdown-lg .dropdown-lg-content {
+    display: flex;
+    flex-direction: row;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu.dropdown-lg .dropdown-header {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu:before {
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    z-index: -1;
+    display: block;
+    height: 100%;
+    width: 100%;
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu .dropdown-toggle:after {
+    position: absolute;
+    top: 0.15rem;
+    right: calc(var(--spacing) * 4);
+    margin-right: calc(var(--spacing) * 0);
+    font-size: 0.85rem;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu.mega-menu {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .navbar-expand-xl:not(.hover-none) .navbar-nav .dropdown-menu {
+    pointer-events: none;
+    visibility: hidden;
+    top: 120%;
+    display: block;
+    opacity: 0%;
+  }
+  .navbar-expand-xl:not(.hover-none) .navbar-nav .dropdown:not(.dropdown-submenu):hover>.dropdown-menu {
+    visibility: visible;
+    top: 100%;
+    opacity: 100%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.25s;
+    transition-duration: 0.25s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    pointer-events: all;
+  }
+  .navbar-expand-xl:not(.hover-none) .navbar-nav .dropdown-submenu {
+    position: relative;
+  }
+  .navbar-expand-xl:not(.hover-none) .navbar-nav .dropdown-submenu .dropdown-menu {
+    top: 30%;
+  }
+  .navbar-expand-xl:not(.hover-none) .navbar-nav .dropdown-submenu.dropstart:before {
+    position: absolute;
+    left: -1rem;
+    z-index: -1;
+    display: block;
+    height: 100%;
+    width: 100%;
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .navbar-expand-xl:not(.hover-none) .navbar-nav .dropdown-submenu:hover>.dropdown-menu {
+    visibility: visible;
+    top: calc(var(--spacing) * 0);
+    opacity: 100%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.25s;
+    transition-duration: 0.25s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    pointer-events: all;
+  }
+  .navbar-expand-xl .dropend>.dropdown-menu {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-xl .dropstart>.dropdown-menu {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-xl .offcanvas-nav {
+    flex-direction: row;
+    position: unset;
+  }
+  .navbar-expand-xl .offcanvas-nav.offcanvas-end,.navbar-expand-xl .offcanvas-nav.offcanvas-start {
+    width: 100%;
+  }
+  .navbar-expand-xl.extended.navbar-bg-light:not(.fixed),.navbar-expand-xl.fancy.navbar-bg-light:not(.fixed) {
+    background-color: var(--color-black) !important;
+  }
+  .navbar-expand-xl.extended:not(.fixed) .navbar-collapse .nav-link {
+    padding-block: 1.15rem;
+  }
+  .navbar-expand-xl.fancy:not(.fixed) .navbar-collapse .nav-link {
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .navbar-expand-xl[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
+    padding-block: 1.7rem;
+  }
+  .navbar-expand-xl.extended .navbar-collapse-wrapper,.navbar-expand-xl.fancy .navbar-collapse-wrapper {
+    width: 100%;
+    border-radius: 0.4rem;
+    --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.02));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .navbar-expand-xl.extended:not(.extended-alt):not(.fixed) .navbar-collapse-wrapper {
+    padding-block: calc(var(--spacing) * 0);
+    padding-right: calc(var(--spacing) * 6);
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-xl.extended.extended-alt:not(.fixed) .navbar-collapse-wrapper {
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xl.fancy:not(.fixed) .navbar-collapse-wrapper {
+    margin-top: calc(var(--spacing) * 9);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xl.extended:not(.extended-alt) .navbar-brand {
+    padding-block: calc(var(--spacing) * 6);
+  }
+  .navbar-expand-xl.extended.extended-alt .navbar-brand {
+    padding-block: calc(var(--spacing) * 7);
+  }
+  .navbar-expand-xl.fixed .topbar {
+    display: none;
+  }
+  .navbar-expand-xl.navbar-dark:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand-xl.navbar-light:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand-xl.transparent.fixed .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-xl .navbar-collapse .nav-link {
+    white-space: nowrap;
+  }
+  .navbar-expand-xl .navbar-collapse .nav-item.parent-link {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .navbar-expand-xl .navbar-collapse .nav-item.parent-link>.nav-link:first-child {
+    padding-right: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xl .navbar-collapse .nav-item.parent-link .dropdown-toggle {
+    padding-left: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xl .dropdown-lg-content>div+div,.navbar-expand-xl .mega-menu-content>.row>[class*=col-]+[class*=col-] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-left-color: rgba(164,174,198,0.2);
+  }
+  .navbar-expand-xl .mega-menu-content {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: 0.6rem;
+    padding-bottom: 0.2rem;
+  }
+  .navbar-expand-xl .mega-menu-dark {
+    background-color: #2e353e;
+  }
+  .navbar-expand-xl .mega-menu-dark .img-svg {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    background-color: rgba(255,255,255,.05);
+  }
+  .navbar-expand-xl .mega-menu-dark .img-svg:hover {
+    background-color: rgba(255,255,255,.09);
+  }
+  .navbar-expand-xl .mega-menu-dark .dropdown-item {
+    color: var(--color-white);
+  }
+  .navbar-expand-xl .mega-menu-dark .dropdown-item:focus,.navbar-expand-xl .mega-menu-dark .dropdown-item:hover {
+    color: var(--color-white);
+  }
+  .navbar-expand-xl .mega-menu-img {
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xl .mega-menu-img .mega-menu-content {
+    margin-inline: calc(var(--spacing) * 0);
+    margin-block: 1.8rem;
+    padding-inline: calc(var(--spacing) * 8);
+    padding-block: 0.2rem;
+  }
+  .navbar-expand-xl .mega-menu-img .dropdown-item {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xl.caret-none .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+    display: none;
+  }
+  .navbar-expand .navbar-other .nav-item .nav-link>i {
+    font-size: 1.3rem;
+  }
+  .overlay:not(.caption-overlay) i {
+    font-size: 1.4rem;
+  }
+  .pricing-wrapper [class*=xl\:w-] .pricing.card .prices .price-value {
+    font-size: 2.4rem;
+  }
+  .projects-overflow .project-details {
+    max-width: 24rem;
+  }
+  #comments ul.children li.comment:before {
+    font-size: 2rem;
+  }
+}
+@media (max-width:1399.98px) {
+  .table-responsive-xxl {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .underline-3.style-1:after,.underline-3.style-1:before {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas-nav {
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .navbar-expand-xxl .offcanvas-nav .offcanvas-body,.navbar-expand-xxl .offcanvas-nav .offcanvas-footer,.navbar-expand-xxl .offcanvas-nav .offcanvas-header {
+    width: 100%;
+  }
+  .navbar-expand-xxl .offcanvas-nav .offcanvas-body {
+    flex-grow: 0;
+    overflow-y: unset;
+  }
+  .navbar-expand-xxl .navbar-collapse .dropdown-menu {
+    margin-top: calc(var(--spacing) * 0);
+    background-color: var(--color-black);
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xxl .navbar-collapse .dropdown-menu .dropdown-item {
+    padding-block: 0.3rem;
+    padding-left: calc(var(--spacing) * 4);
+    color: var(--color-white);
+  }
+  .navbar-expand-xxl .navbar-collapse .nav-link,.navbar-expand-xxl .navbar-collapse .nav-link.active,.navbar-expand-xxl .navbar-collapse .nav-link:focus,.navbar-expand-xxl .navbar-collapse .nav-link:hover,.navbar-expand-xxl .navbar-collapse .show>.nav-link {
+    color: var(--color-white);
+  }
+  .navbar-expand-xxl .navbar-collapse .nav-link {
+    padding-block: 0.3rem;
+  }
+  .navbar-expand-xxl .navbar-collapse .dropdown-toggle:after {
+    position: absolute;
+    top: 0.35rem;
+    right: -0.25rem;
+    margin-right: calc(var(--spacing) * 0);
+    font-size: 0.9rem;
+  }
+  .navbar-expand-xxl .navbar-collapse .dropdown-submenu .dropdown-toggle:after {
+    top: 0.3rem;
+  }
+  .navbar-expand-xxl .dropdown-header {
+    margin-top: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .navbar-expand-xxl .dropend .dropdown-toggle:after,.navbar-expand-xxl .dropstart .dropdown-toggle:after {
+    --tw-content: "\e92d";
+    content: var(--tw-content);
+  }
+  .navbar-expand-xxl .dropstart .dropdown-menu[data-bs-popper] {
+    margin-right: calc(var(--spacing) * 0);
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .navbar-expand-xxl .dropdown-toggle:after {
+    top: calc(var(--spacing) * 1);
+  }
+  .navbar-expand-xxl .language-select .dropdown-toggle:after {
+    vertical-align: 0 !important;
+  }
+  .navbar-expand-xxl .navbar-other .nav-item.language-select .nav-link {
+    font-size: 1.05rem;
+  }
+  .navbar-expand-xxl .navbar-other .nav-item .nav-link>i {
+    font-size: calc(1.255rem + 0.06vw);
+  }
+  .navbar-expand-xxl .navbar-brand {
+    padding-block: 1.2rem;
+  }
+  .navbar-expand-xxl.fancy .navbar-collapse-wrapper {
+    background-color: var(--color-black) !important;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .navbar-expand-xxl.center-logo.fixed .offcanvas-header .logo-light {
+    display: inline-block;
+  }
+  .navbar-expand-xxl.center-logo.fixed .offcanvas-header .logo-dark {
+    display: none;
+  }
+  .navbar-expand-xxl .nav-item.parent-link .dropdown-toggle {
+    padding-block: calc(var(--spacing) * 0);
+  }
+}
+@media (max-width:1199.98px) {
+  .table-responsive-xl {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .border-radius-lg-top {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .navbar-expand-xl .offcanvas-nav {
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .navbar-expand-xl .offcanvas-nav .offcanvas-body,.navbar-expand-xl .offcanvas-nav .offcanvas-footer,.navbar-expand-xl .offcanvas-nav .offcanvas-header {
+    width: 100%;
+  }
+  .navbar-expand-xl .offcanvas-nav .offcanvas-body {
+    flex-grow: 0;
+    overflow-y: unset;
+  }
+  .navbar-expand-xl .navbar-collapse .dropdown-menu {
+    margin-top: calc(var(--spacing) * 0);
+    background-color: var(--color-black);
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-xl .navbar-collapse .dropdown-menu .dropdown-item {
+    padding-block: 0.3rem;
+    padding-left: calc(var(--spacing) * 4);
+    color: var(--color-white);
+  }
+  .navbar-expand-xl .navbar-collapse .nav-link,.navbar-expand-xl .navbar-collapse .nav-link.active,.navbar-expand-xl .navbar-collapse .nav-link:focus,.navbar-expand-xl .navbar-collapse .nav-link:hover,.navbar-expand-xl .navbar-collapse .show>.nav-link {
+    color: var(--color-white);
+  }
+  .navbar-expand-xl .navbar-collapse .nav-link {
+    padding-block: 0.3rem;
+  }
+  .navbar-expand-xl .navbar-collapse .dropdown-toggle:after {
+    position: absolute;
+    top: 0.35rem;
+    right: -0.25rem;
+    margin-right: calc(var(--spacing) * 0);
+    font-size: 0.9rem;
+  }
+  .navbar-expand-xl .navbar-collapse .dropdown-submenu .dropdown-toggle:after {
+    top: 0.3rem;
+  }
+  .navbar-expand-xl .dropdown-header {
+    margin-top: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .navbar-expand-xl .dropend .dropdown-toggle:after,.navbar-expand-xl .dropstart .dropdown-toggle:after {
+    --tw-content: "\e92d";
+    content: var(--tw-content);
+  }
+  .navbar-expand-xl .dropstart .dropdown-menu[data-bs-popper] {
+    margin-right: calc(var(--spacing) * 0);
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .navbar-expand-xl .dropdown-toggle:after {
+    top: calc(var(--spacing) * 1);
+  }
+  .navbar-expand-xl .language-select .dropdown-toggle:after {
+    vertical-align: 0 !important;
+  }
+  .navbar-expand-xl .navbar-other .nav-item.language-select .nav-link {
+    font-size: 1.05rem;
+  }
+  .navbar-expand-xl .navbar-other .nav-item .nav-link>i {
+    font-size: calc(1.255rem + 0.06vw);
+  }
+  .navbar-expand-xl .navbar-brand {
+    padding-block: 1.2rem;
+  }
+  .navbar-expand-xl.fancy .navbar-collapse-wrapper {
+    background-color: var(--color-black) !important;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .navbar-expand-xl.center-logo.fixed .offcanvas-header .logo-light {
+    display: inline-block;
+  }
+  .navbar-expand-xl.center-logo.fixed .offcanvas-header .logo-dark {
+    display: none;
+  }
+  .navbar-expand-xl .nav-item.parent-link .dropdown-toggle {
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .swiper-fullscreen,.swiper-fullscreen .swiper:not(.swiper-thumbs) .swiper-slide {
+    height: 750px;
+  }
+}
+@media (min-width:992px) {
+  .navbar-expand-lg {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-lg .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-inline: 1rem;
+  }
+  .navbar-expand-lg .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-lg .navbar-collapse {
+    display: flex;
+    flex-basis: auto;
+  }
+  .navbar-expand-lg .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-lg .offcanvas {
+    visibility: visible;
+    position: static;
+    z-index: auto;
+    height: auto;
+    width: auto;
+    flex-grow: 1;
+    transform: none !important;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: none;
+  }
+  .navbar-expand-lg .offcanvas .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-lg .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    overflow-y: visible;
+    padding: calc(var(--spacing) * 0);
+  }
+  .modal-lg,.modal-xl {
+    width: 800px;
+  }
+  .sticky-lg-top {
+    position: sticky;
+    top: calc(var(--spacing) * 0);
+    z-index: 1020;
+  }
+  .sticky-lg-bottom {
+    position: sticky;
+    bottom: calc(var(--spacing) * 0);
+    z-index: 1020;
+  }
+  .float-lg-start {
+    float: left;
+  }
+  .float-lg-end {
+    float: right;
+  }
+  .float-lg-none {
+    float: none;
+  }
+  .object-fit-lg-contain {
+    object-fit: contain;
+    -o-object-fit: contain !important;
+  }
+  .object-fit-lg-cover {
+    object-fit: cover;
+    -o-object-fit: cover !important;
+  }
+  .object-fit-lg-fill {
+    object-fit: fill;
+    -o-object-fit: fill !important;
+  }
+  .object-fit-lg-scale {
+    object-fit: scale-down;
+    -o-object-fit: scale-down !important;
+  }
+  .object-fit-lg-none {
+    object-fit: none;
+    -o-object-fit: none !important;
+  }
+  .d-lg-inline {
+    display: inline;
+  }
+  .d-lg-inline-block {
+    display: inline-block;
+  }
+  .d-lg-block {
+    display: block;
+  }
+  .d-lg-grid {
+    display: grid;
+  }
+  .d-lg-inline-grid {
+    display: inline-grid;
+  }
+  .d-lg-table {
+    display: table;
+  }
+  .d-lg-table-row {
+    display: table-row;
+  }
+  .d-lg-table-cell {
+    display: table-cell;
+  }
+  .d-lg-flex {
+    display: flex;
+  }
+  .d-lg-inline-flex {
+    display: inline-flex;
+  }
+  .flex-lg-fill {
+    flex: auto;
+  }
+  .flex-lg-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .flex-lg-column-reverse {
+    flex-direction: column-reverse;
+  }
+  .flex-lg-grow-0 {
+    flex-grow: 0;
+  }
+  .flex-lg-grow-1 {
+    flex-grow: 1;
+  }
+  .flex-lg-shrink-0 {
+    flex-shrink: 0;
+  }
+  .flex-lg-shrink-1 {
+    flex-shrink: 1;
+  }
+  .flex-lg-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-lg-nowrap {
+    flex-wrap: nowrap;
+  }
+  .flex-lg-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .justify-content-lg-start {
+    @media (width >= 992px) {
+      justify-content: flex-start !important;
+    }
+  }
+  .justify-content-lg-end {
+    @media (width >= 992px) {
+      justify-content: flex-end !important;
+    }
+  }
+  .justify-content-lg-center {
+    @media (width >= 992px) {
+      justify-content: center !important;
+    }
+  }
+  .justify-content-lg-between {
+    @media (width >= 992px) {
+      justify-content: space-between !important;
+    }
+  }
+  .justify-content-lg-around {
+    @media (width >= 992px) {
+      justify-content: space-around !important;
+    }
+  }
+  .justify-content-lg-evenly {
+    @media (width >= 992px) {
+      justify-content: space-evenly !important;
+    }
+  }
+  .align-items-lg-start {
+    @media (width >= 992px) {
+      align-items: flex-start !important;
+    }
+  }
+  .align-items-lg-end {
+    @media (width >= 992px) {
+      align-items: flex-end !important;
+    }
+  }
+  .align-items-lg-center {
+    @media (width >= 992px) {
+      align-items: center !important;
+    }
+  }
+  .align-items-lg-baseline {
+    @media (width >= 992px) {
+      align-items: baseline !important;
+    }
+  }
+  .align-items-lg-stretch {
+    @media (width >= 992px) {
+      align-items: stretch !important;
+    }
+  }
+  .order-lg-first {
+    @media (width >= 992px) {
+      order: calc(1 * -1) !important;
+    }
+  }
+  .order-lg-0 {
+    @media (width >= 992px) {
+      order: 0 !important;
+    }
+  }
+  .order-lg-1 {
+    @media (width >= 992px) {
+      order: 1 !important;
+    }
+  }
+  .order-lg-2 {
+    @media (width >= 992px) {
+      order: 2 !important;
+    }
+  }
+  .order-lg-3 {
+    @media (width >= 992px) {
+      order: 3 !important;
+    }
+  }
+  .order-lg-4 {
+    @media (width >= 992px) {
+      order: 4 !important;
+    }
+  }
+  .order-lg-5 {
+    @media (width >= 992px) {
+      order: 5 !important;
+    }
+  }
+  .order-lg-last {
+    @media (width >= 992px) {
+      order: 6 !important;
+    }
+  }
+  .m-lg-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .m-lg-1 {
+    margin: calc(var(--spacing) * 1);
+  }
+  .m-lg-2 {
+    margin: calc(var(--spacing) * 2);
+  }
+  .m-lg-3 {
+    margin: calc(var(--spacing) * 3);
+  }
+  .m-lg-4 {
+    margin: calc(var(--spacing) * 4);
+  }
+  .m-lg-5 {
+    margin: calc(var(--spacing) * 5);
+  }
+  .m-lg-6 {
+    margin: calc(var(--spacing) * 6);
+  }
+  .m-lg-7 {
+    margin: calc(var(--spacing) * 7);
+  }
+  .m-lg-8 {
+    margin: calc(var(--spacing) * 8);
+  }
+  .m-lg-9 {
+    margin: calc(var(--spacing) * 9);
+  }
+  .m-lg-10 {
+    margin: calc(var(--spacing) * 10);
+  }
+  .m-lg-11 {
+    margin: calc(var(--spacing) * 12);
+  }
+  .m-lg-12 {
+    margin: calc(var(--spacing) * 14);
+  }
+  .m-lg-13 {
+    margin: calc(var(--spacing) * 16);
+  }
+  .m-lg-14 {
+    margin: 4.5rem;
+  }
+  .m-lg-15 {
+    margin: calc(var(--spacing) * 20);
+  }
+  .m-lg-16 {
+    margin: calc(var(--spacing) * 24);
+  }
+  .m-lg-17 {
+    margin: calc(var(--spacing) * 28);
+  }
+  .m-lg-18 {
+    margin: calc(var(--spacing) * 32);
+  }
+  .m-lg-19 {
+    margin: calc(var(--spacing) * 36);
+  }
+  .m-lg-20 {
+    margin: calc(var(--spacing) * 40);
+  }
+  .m-lg-21 {
+    margin: 12.5rem;
+  }
+  .m-lg-22 {
+    margin: calc(var(--spacing) * 60);
+  }
+  .m-lg-23 {
+    margin: 17.5rem;
+  }
+  .m-lg-24 {
+    margin: calc(var(--spacing) * 80);
+  }
+  .m-lg-25 {
+    margin: 22.5rem;
+  }
+  .m-lg-auto {
+    margin: auto;
+  }
+  .mx-lg-0 {
+    margin-inline: calc(var(--spacing) * 0);
+  }
+  .mx-lg-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+  .mx-lg-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
+  .mx-lg-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .mx-lg-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
+  .mx-lg-5 {
+    margin-inline: calc(var(--spacing) * 5);
+  }
+  .mx-lg-6 {
+    @media (width >= 992px) {
+      margin-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .mx-lg-7 {
+    margin-inline: calc(var(--spacing) * 7);
+  }
+  .mx-lg-8 {
+    margin-inline: calc(var(--spacing) * 8);
+  }
+  .mx-lg-9 {
+    margin-inline: calc(var(--spacing) * 9);
+  }
+  .mx-lg-10 {
+    @media (width >= 992px) {
+      margin-inline: calc(var(--spacing) * 10);
+    }
+  }
+  .mx-lg-11 {
+    margin-inline: calc(var(--spacing) * 12);
+  }
+  .mx-lg-12 {
+    margin-inline: calc(var(--spacing) * 14);
+  }
+  .mx-lg-13 {
+    margin-inline: calc(var(--spacing) * 16);
+  }
+  .mx-lg-14 {
+    margin-inline: 4.5rem;
+  }
+  .mx-lg-15 {
+    margin-inline: calc(var(--spacing) * 20);
+  }
+  .mx-lg-16 {
+    margin-inline: calc(var(--spacing) * 24);
+  }
+  .mx-lg-17 {
+    margin-inline: calc(var(--spacing) * 28);
+  }
+  .mx-lg-18 {
+    margin-inline: calc(var(--spacing) * 32);
+  }
+  .mx-lg-19 {
+    margin-inline: calc(var(--spacing) * 36);
+  }
+  .mx-lg-20 {
+    margin-inline: calc(var(--spacing) * 40);
+  }
+  .mx-lg-21 {
+    margin-inline: 12.5rem;
+  }
+  .mx-lg-22 {
+    margin-inline: calc(var(--spacing) * 60);
+  }
+  .mx-lg-23 {
+    margin-inline: 17.5rem;
+  }
+  .mx-lg-24 {
+    margin-inline: calc(var(--spacing) * 80);
+  }
+  .mx-lg-25 {
+    margin-inline: 22.5rem;
+  }
+  .mx-lg-auto {
+    @media (width >= 992px) {
+      margin-inline: auto;
+    }
+  }
+  .my-lg-0 {
+    margin-block: calc(var(--spacing) * 0);
+  }
+  .my-lg-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+  .my-lg-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .my-lg-3 {
+    margin-block: calc(var(--spacing) * 3);
+  }
+  .my-lg-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .my-lg-5 {
+    margin-block: calc(var(--spacing) * 5);
+  }
+  .my-lg-6 {
+    margin-block: calc(var(--spacing) * 6);
+  }
+  .my-lg-7 {
+    margin-block: calc(var(--spacing) * 7);
+  }
+  .my-lg-8 {
+    margin-block: calc(var(--spacing) * 8);
+  }
+  .my-lg-9 {
+    margin-block: calc(var(--spacing) * 9);
+  }
+  .my-lg-10 {
+    margin-block: calc(var(--spacing) * 10);
+  }
+  .my-lg-11 {
+    margin-block: calc(var(--spacing) * 12);
+  }
+  .my-lg-12 {
+    margin-block: calc(var(--spacing) * 14);
+  }
+  .my-lg-13 {
+    margin-block: calc(var(--spacing) * 16);
+  }
+  .my-lg-14 {
+    margin-block: 4.5rem;
+  }
+  .my-lg-15 {
+    margin-block: calc(var(--spacing) * 20);
+  }
+  .my-lg-16 {
+    margin-block: calc(var(--spacing) * 24);
+  }
+  .my-lg-17 {
+    margin-block: calc(var(--spacing) * 28);
+  }
+  .my-lg-18 {
+    margin-block: calc(var(--spacing) * 32);
+  }
+  .my-lg-19 {
+    margin-block: calc(var(--spacing) * 36);
+  }
+  .my-lg-20 {
+    margin-block: calc(var(--spacing) * 40);
+  }
+  .my-lg-21 {
+    margin-block: 12.5rem;
+  }
+  .my-lg-22 {
+    margin-block: calc(var(--spacing) * 60);
+  }
+  .my-lg-23 {
+    margin-block: 17.5rem;
+  }
+  .my-lg-24 {
+    margin-block: calc(var(--spacing) * 80);
+  }
+  .my-lg-25 {
+    margin-block: 22.5rem;
+  }
+  .my-lg-auto {
+    margin-block: auto;
+  }
+  .mt-lg-0 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .mt-lg-1 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 1) !important;
+    }
+  }
+  .mt-lg-2 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .mt-lg-3 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .mt-lg-4 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .mt-lg-5 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .mt-lg-6 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .mt-lg-7 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .mt-lg-8 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .mt-lg-9 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .mt-lg-10 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .mt-lg-11 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .mt-lg-12 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .mt-lg-13 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .mt-lg-14 {
+    @media (width >= 992px) {
+      margin-top: 4.5rem !important;
+    }
+  }
+  .mt-lg-15 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .mt-lg-16 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .mt-lg-17 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .mt-lg-18 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .mt-lg-19 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .mt-lg-20 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .mt-lg-21 {
+    @media (width >= 992px) {
+      margin-top: 12.5rem !important;
+    }
+  }
+  .mt-lg-22 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .mt-lg-23 {
+    @media (width >= 992px) {
+      margin-top: 17.5rem !important;
+    }
+  }
+  .mt-lg-24 {
+    @media (width >= 992px) {
+      margin-top: calc(var(--spacing) * 80) !important;
+    }
+  }
+  .mt-lg-25 {
+    @media (width >= 992px) {
+      margin-top: 22.5rem !important;
+    }
+  }
+  .mt-lg-auto {
+    @media (width >= 992px) {
+      margin-top: auto !important;
+    }
+  }
+  .me-lg-0 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .me-lg-1 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 1) !important;
+    }
+  }
+  .me-lg-2 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .me-lg-3 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .me-lg-4 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .me-lg-5 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .me-lg-6 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .me-lg-7 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .me-lg-8 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .me-lg-9 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .me-lg-10 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .me-lg-11 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .me-lg-12 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .me-lg-13 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .me-lg-14 {
+    @media (width >= 992px) {
+      margin-right: 4.5rem !important;
+    }
+  }
+  .me-lg-15 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .me-lg-16 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .me-lg-17 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .me-lg-18 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .me-lg-19 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .me-lg-20 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .me-lg-21 {
+    @media (width >= 992px) {
+      margin-right: 12.5rem !important;
+    }
+  }
+  .me-lg-22 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .me-lg-23 {
+    @media (width >= 992px) {
+      margin-right: 17.5rem !important;
+    }
+  }
+  .me-lg-24 {
+    @media (width >= 992px) {
+      margin-right: calc(var(--spacing) * 80) !important;
+    }
+  }
+  .me-lg-25 {
+    @media (width >= 992px) {
+      margin-right: 22.5rem !important;
+    }
+  }
+  .me-lg-auto {
+    @media (width >= 992px) {
+      margin-right: auto !important;
+    }
+  }
+  .mb-lg-0 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .mb-lg-1 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 1) !important;
+    }
+  }
+  .mb-lg-2 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .mb-lg-3 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .mb-lg-4 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .mb-lg-5 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .mb-lg-6 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .mb-lg-7 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .mb-lg-8 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .mb-lg-9 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .mb-lg-10 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .mb-lg-11 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .mb-lg-12 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .mb-lg-13 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .mb-lg-14 {
+    @media (width >= 992px) {
+      margin-bottom: 4.5rem !important;
+    }
+  }
+  .mb-lg-15 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .mb-lg-16 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .mb-lg-17 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .mb-lg-18 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .mb-lg-19 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .mb-lg-20 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .mb-lg-21 {
+    @media (width >= 992px) {
+      margin-bottom: 12.5rem !important;
+    }
+  }
+  .mb-lg-22 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .mb-lg-23 {
+    @media (width >= 992px) {
+      margin-bottom: 17.5rem !important;
+    }
+  }
+  .mb-lg-24 {
+    @media (width >= 992px) {
+      margin-bottom: calc(var(--spacing) * 80) !important;
+    }
+  }
+  .mb-lg-25 {
+    @media (width >= 992px) {
+      margin-bottom: 22.5rem !important;
+    }
+  }
+  .mb-lg-auto {
+    @media (width >= 992px) {
+      margin-bottom: auto !important;
+    }
+  }
+  .ms-lg-0 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .ms-lg-1 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 1) !important;
+    }
+  }
+  .ms-lg-2 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .ms-lg-3 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .ms-lg-4 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .ms-lg-5 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .ms-lg-6 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .ms-lg-7 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .ms-lg-8 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .ms-lg-9 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .ms-lg-10 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .ms-lg-11 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .ms-lg-12 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .ms-lg-13 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .ms-lg-14 {
+    @media (width >= 992px) {
+      margin-left: 4.5rem !important;
+    }
+  }
+  .ms-lg-15 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .ms-lg-16 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .ms-lg-17 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .ms-lg-18 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .ms-lg-19 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .ms-lg-20 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .ms-lg-21 {
+    @media (width >= 992px) {
+      margin-left: 12.5rem !important;
+    }
+  }
+  .ms-lg-22 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .ms-lg-23 {
+    @media (width >= 992px) {
+      margin-left: 17.5rem !important;
+    }
+  }
+  .ms-lg-24 {
+    @media (width >= 992px) {
+      margin-left: calc(var(--spacing) * 80) !important;
+    }
+  }
+  .ms-lg-25 {
+    @media (width >= 992px) {
+      margin-left: 22.5rem !important;
+    }
+  }
+  .ms-lg-auto {
+    @media (width >= 992px) {
+      margin-left: auto !important;
+    }
+  }
+  .m-lg-n1 {
+    margin-top: -0.25rem;
+    margin-right: -0.25rem;
+    margin-bottom: -0.25rem;
+    margin-left: -0.25rem;
+  }
+  .m-lg-n2 {
+    margin-top: -0.5rem;
+    margin-right: -0.5rem;
+    margin-bottom: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  .m-lg-n3 {
+    margin-top: -0.75rem;
+    margin-right: -0.75rem;
+    margin-bottom: -0.75rem;
+    margin-left: -0.75rem;
+  }
+  .m-lg-n4 {
+    margin-top: -1rem;
+    margin-right: -1rem;
+    margin-bottom: -1rem;
+    margin-left: -1rem;
+  }
+  .m-lg-n5 {
+    margin-top: -1.25rem;
+    margin-right: -1.25rem;
+    margin-bottom: -1.25rem;
+    margin-left: -1.25rem;
+  }
+  .m-lg-n6 {
+    margin-top: -1.5rem;
+    margin-right: -1.5rem;
+    margin-bottom: -1.5rem;
+    margin-left: -1.5rem;
+  }
+  .m-lg-n7 {
+    margin-top: -1.75rem;
+    margin-right: -1.75rem;
+    margin-bottom: -1.75rem;
+    margin-left: -1.75rem;
+  }
+  .m-lg-n8 {
+    margin-top: -2rem;
+    margin-right: -2rem;
+    margin-bottom: -2rem;
+    margin-left: -2rem;
+  }
+  .m-lg-n9 {
+    margin-top: -2.25rem;
+    margin-right: -2.25rem;
+    margin-bottom: -2.25rem;
+    margin-left: -2.25rem;
+  }
+  .m-lg-n10 {
+    margin-top: -2.5rem;
+    margin-right: -2.5rem;
+    margin-bottom: -2.5rem;
+    margin-left: -2.5rem;
+  }
+  .m-lg-n11 {
+    margin-top: -3rem;
+    margin-right: -3rem;
+    margin-bottom: -3rem;
+    margin-left: -3rem;
+  }
+  .m-lg-n12 {
+    margin-top: -3.5rem;
+    margin-right: -3.5rem;
+    margin-bottom: -3.5rem;
+    margin-left: -3.5rem;
+  }
+  .m-lg-n13 {
+    margin-top: -4rem;
+    margin-right: -4rem;
+    margin-bottom: -4rem;
+    margin-left: -4rem;
+  }
+  .m-lg-n14 {
+    margin-top: -4.5rem;
+    margin-right: -4.5rem;
+    margin-bottom: -4.5rem;
+    margin-left: -4.5rem;
+  }
+  .m-lg-n15 {
+    margin-top: -5rem;
+    margin-right: -5rem;
+    margin-bottom: -5rem;
+    margin-left: -5rem;
+  }
+  .m-lg-n16 {
+    margin-top: -6rem;
+    margin-right: -6rem;
+    margin-bottom: -6rem;
+    margin-left: -6rem;
+  }
+  .m-lg-n17 {
+    margin-top: -7rem;
+    margin-right: -7rem;
+    margin-bottom: -7rem;
+    margin-left: -7rem;
+  }
+  .m-lg-n18 {
+    margin-top: -8rem;
+    margin-right: -8rem;
+    margin-bottom: -8rem;
+    margin-left: -8rem;
+  }
+  .m-lg-n19 {
+    margin-top: -9rem;
+    margin-right: -9rem;
+    margin-bottom: -9rem;
+    margin-left: -9rem;
+  }
+  .m-lg-n20 {
+    margin-top: -10rem;
+    margin-right: -10rem;
+    margin-bottom: -10rem;
+    margin-left: -10rem;
+  }
+  .m-lg-n21 {
+    margin-top: -12.5rem;
+    margin-right: -12.5rem;
+    margin-bottom: -12.5rem;
+    margin-left: -12.5rem;
+  }
+  .m-lg-n22 {
+    margin-top: -15rem;
+    margin-right: -15rem;
+    margin-bottom: -15rem;
+    margin-left: -15rem;
+  }
+  .m-lg-n23 {
+    margin-top: -17.5rem;
+    margin-right: -17.5rem;
+    margin-bottom: -17.5rem;
+    margin-left: -17.5rem;
+  }
+  .m-lg-n24 {
+    margin-top: -20rem;
+    margin-right: -20rem;
+    margin-bottom: -20rem;
+    margin-left: -20rem;
+  }
+  .m-lg-n25 {
+    margin-top: -22.5rem;
+    margin-right: -22.5rem;
+    margin-bottom: -22.5rem;
+    margin-left: -22.5rem;
+  }
+  .mx-lg-n1 {
+    margin-right: -0.25rem;
+    margin-left: -0.25rem;
+  }
+  .mx-lg-n2 {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  .mx-lg-n3 {
+    margin-right: -0.75rem;
+    margin-left: -0.75rem;
+  }
+  .mx-lg-n4 {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  .mx-lg-n5 {
+    margin-right: -1.25rem;
+    margin-left: -1.25rem;
+  }
+  .mx-lg-n6 {
+    margin-right: -1.5rem;
+    margin-left: -1.5rem;
+  }
+  .mx-lg-n7 {
+    margin-right: -1.75rem;
+    margin-left: -1.75rem;
+  }
+  .mx-lg-n8 {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  .mx-lg-n9 {
+    margin-right: -2.25rem;
+    margin-left: -2.25rem;
+  }
+  .mx-lg-n10 {
+    @media (width >= 992px) {
+      margin-inline: -2.5rem;
+    }
+  }
+  .mx-lg-n11 {
+    margin-right: -3rem;
+    margin-left: -3rem;
+  }
+  .mx-lg-n12 {
+    margin-right: -3.5rem;
+    margin-left: -3.5rem;
+  }
+  .mx-lg-n13 {
+    margin-right: -4rem;
+    margin-left: -4rem;
+  }
+  .mx-lg-n14 {
+    margin-right: -4.5rem;
+    margin-left: -4.5rem;
+  }
+  .mx-lg-n15 {
+    margin-right: -5rem;
+    margin-left: -5rem;
+  }
+  .mx-lg-n16 {
+    margin-right: -6rem;
+    margin-left: -6rem;
+  }
+  .mx-lg-n17 {
+    margin-right: -7rem;
+    margin-left: -7rem;
+  }
+  .mx-lg-n18 {
+    margin-right: -8rem;
+    margin-left: -8rem;
+  }
+  .mx-lg-n19 {
+    margin-right: -9rem;
+    margin-left: -9rem;
+  }
+  .mx-lg-n20 {
+    margin-right: -10rem;
+    margin-left: -10rem;
+  }
+  .mx-lg-n21 {
+    margin-right: -12.5rem;
+    margin-left: -12.5rem;
+  }
+  .mx-lg-n22 {
+    margin-right: -15rem;
+    margin-left: -15rem;
+  }
+  .mx-lg-n23 {
+    margin-right: -17.5rem;
+    margin-left: -17.5rem;
+  }
+  .mx-lg-n24 {
+    margin-right: -20rem;
+    margin-left: -20rem;
+  }
+  .mx-lg-n25 {
+    margin-right: -22.5rem;
+    margin-left: -22.5rem;
+  }
+  .my-lg-n1 {
+    margin-top: -0.25rem;
+    margin-bottom: -0.25rem;
+  }
+  .my-lg-n2 {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+  .my-lg-n3 {
+    margin-top: -0.75rem;
+    margin-bottom: -0.75rem;
+  }
+  .my-lg-n4 {
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+  }
+  .my-lg-n5 {
+    margin-top: -1.25rem;
+    margin-bottom: -1.25rem;
+  }
+  .my-lg-n6 {
+    margin-top: -1.5rem;
+    margin-bottom: -1.5rem;
+  }
+  .my-lg-n7 {
+    margin-top: -1.75rem;
+    margin-bottom: -1.75rem;
+  }
+  .my-lg-n8 {
+    margin-top: -2rem;
+    margin-bottom: -2rem;
+  }
+  .my-lg-n9 {
+    margin-top: -2.25rem;
+    margin-bottom: -2.25rem;
+  }
+  .my-lg-n10 {
+    margin-top: -2.5rem;
+    margin-bottom: -2.5rem;
+  }
+  .my-lg-n11 {
+    margin-top: -3rem;
+    margin-bottom: -3rem;
+  }
+  .my-lg-n12 {
+    margin-top: -3.5rem;
+    margin-bottom: -3.5rem;
+  }
+  .my-lg-n13 {
+    margin-top: -4rem;
+    margin-bottom: -4rem;
+  }
+  .my-lg-n14 {
+    margin-top: -4.5rem;
+    margin-bottom: -4.5rem;
+  }
+  .my-lg-n15 {
+    margin-top: -5rem;
+    margin-bottom: -5rem;
+  }
+  .my-lg-n16 {
+    margin-top: -6rem;
+    margin-bottom: -6rem;
+  }
+  .my-lg-n17 {
+    margin-top: -7rem;
+    margin-bottom: -7rem;
+  }
+  .my-lg-n18 {
+    margin-top: -8rem;
+    margin-bottom: -8rem;
+  }
+  .my-lg-n19 {
+    margin-top: -9rem;
+    margin-bottom: -9rem;
+  }
+  .my-lg-n20 {
+    margin-top: -10rem;
+    margin-bottom: -10rem;
+  }
+  .my-lg-n21 {
+    margin-top: -12.5rem;
+    margin-bottom: -12.5rem;
+  }
+  .my-lg-n22 {
+    margin-top: -15rem;
+    margin-bottom: -15rem;
+  }
+  .my-lg-n23 {
+    margin-top: -17.5rem;
+    margin-bottom: -17.5rem;
+  }
+  .my-lg-n24 {
+    margin-top: -20rem;
+    margin-bottom: -20rem;
+  }
+  .my-lg-n25 {
+    margin-top: -22.5rem;
+    margin-bottom: -22.5rem;
+  }
+  .mt-lg-n1 {
+    @media (width >= 992px) {
+      margin-top: -0.25rem !important;
+    }
+  }
+  .mt-lg-n2 {
+    @media (width >= 992px) {
+      margin-top: -0.5rem !important;
+    }
+  }
+  .mt-lg-n3 {
+    @media (width >= 992px) {
+      margin-top: -0.75rem !important;
+    }
+  }
+  .mt-lg-n4 {
+    @media (width >= 992px) {
+      margin-top: -1rem !important;
+    }
+  }
+  .mt-lg-n5 {
+    @media (width >= 992px) {
+      margin-top: -1.25rem !important;
+    }
+  }
+  .mt-lg-n6 {
+    @media (width >= 992px) {
+      margin-top: -1.5rem !important;
+    }
+  }
+  .mt-lg-n7 {
+    @media (width >= 992px) {
+      margin-top: -1.75rem !important;
+    }
+  }
+  .mt-lg-n8 {
+    @media (width >= 992px) {
+      margin-top: -2rem !important;
+    }
+  }
+  .mt-lg-n9 {
+    @media (width >= 992px) {
+      margin-top: -2.25rem !important;
+    }
+  }
+  .mt-lg-n10 {
+    @media (width >= 992px) {
+      margin-top: -2.5rem !important;
+    }
+  }
+  .mt-lg-n11 {
+    @media (width >= 992px) {
+      margin-top: -3rem !important;
+    }
+  }
+  .mt-lg-n12 {
+    @media (width >= 992px) {
+      margin-top: -3.5rem !important;
+    }
+  }
+  .mt-lg-n13 {
+    @media (width >= 992px) {
+      margin-top: -4rem !important;
+    }
+  }
+  .mt-lg-n14 {
+    @media (width >= 992px) {
+      margin-top: -4.5rem !important;
+    }
+  }
+  .mt-lg-n15 {
+    @media (width >= 992px) {
+      margin-top: -5rem !important;
+    }
+  }
+  .mt-lg-n16 {
+    @media (width >= 992px) {
+      margin-top: -6rem !important;
+    }
+  }
+  .mt-lg-n17 {
+    @media (width >= 992px) {
+      margin-top: -7rem !important;
+    }
+  }
+  .mt-lg-n18 {
+    @media (width >= 992px) {
+      margin-top: -8rem !important;
+    }
+  }
+  .mt-lg-n19 {
+    @media (width >= 992px) {
+      margin-top: -9rem !important;
+    }
+  }
+  .mt-lg-n20 {
+    @media (width >= 992px) {
+      margin-top: -10rem !important;
+    }
+  }
+  .mt-lg-n21 {
+    @media (width >= 992px) {
+      margin-top: -12.5rem !important;
+    }
+  }
+  .mt-lg-n22 {
+    @media (width >= 992px) {
+      margin-top: -15rem !important;
+    }
+  }
+  .mt-lg-n23 {
+    @media (width >= 992px) {
+      margin-top: -17.5rem !important;
+    }
+  }
+  .mt-lg-n24 {
+    @media (width >= 992px) {
+      margin-top: -20rem !important;
+    }
+  }
+  .mt-lg-n25 {
+    @media (width >= 992px) {
+      margin-top: -22.5rem !important;
+    }
+  }
+  .me-lg-n1 {
+    @media (width >= 992px) {
+      margin-right: -0.25rem !important;
+    }
+  }
+  .me-lg-n2 {
+    @media (width >= 992px) {
+      margin-right: -0.5rem !important;
+    }
+  }
+  .me-lg-n3 {
+    @media (width >= 992px) {
+      margin-right: -0.75rem !important;
+    }
+  }
+  .me-lg-n4 {
+    @media (width >= 992px) {
+      margin-right: -1rem !important;
+    }
+  }
+  .me-lg-n5 {
+    @media (width >= 992px) {
+      margin-right: -1.25rem !important;
+    }
+  }
+  .me-lg-n6 {
+    @media (width >= 992px) {
+      margin-right: -1.5rem !important;
+    }
+  }
+  .me-lg-n7 {
+    @media (width >= 992px) {
+      margin-right: -1.75rem !important;
+    }
+  }
+  .me-lg-n8 {
+    @media (width >= 992px) {
+      margin-right: -2rem !important;
+    }
+  }
+  .me-lg-n9 {
+    @media (width >= 992px) {
+      margin-right: -2.25rem !important;
+    }
+  }
+  .me-lg-n10 {
+    @media (width >= 992px) {
+      margin-right: -2.5rem !important;
+    }
+  }
+  .me-lg-n11 {
+    @media (width >= 992px) {
+      margin-right: -3rem !important;
+    }
+  }
+  .me-lg-n12 {
+    @media (width >= 992px) {
+      margin-right: -3.5rem !important;
+    }
+  }
+  .me-lg-n13 {
+    @media (width >= 992px) {
+      margin-right: -4rem !important;
+    }
+  }
+  .me-lg-n14 {
+    @media (width >= 992px) {
+      margin-right: -4.5rem !important;
+    }
+  }
+  .me-lg-n15 {
+    @media (width >= 992px) {
+      margin-right: -5rem !important;
+    }
+  }
+  .me-lg-n16 {
+    @media (width >= 992px) {
+      margin-right: -6rem !important;
+    }
+  }
+  .me-lg-n17 {
+    @media (width >= 992px) {
+      margin-right: -7rem !important;
+    }
+  }
+  .me-lg-n18 {
+    @media (width >= 992px) {
+      margin-right: -8rem !important;
+    }
+  }
+  .me-lg-n19 {
+    @media (width >= 992px) {
+      margin-right: -9rem !important;
+    }
+  }
+  .me-lg-n20 {
+    @media (width >= 992px) {
+      margin-right: -10rem !important;
+    }
+  }
+  .me-lg-n21 {
+    @media (width >= 992px) {
+      margin-right: -12.5rem !important;
+    }
+  }
+  .me-lg-n22 {
+    @media (width >= 992px) {
+      margin-right: -15rem !important;
+    }
+  }
+  .me-lg-n23 {
+    @media (width >= 992px) {
+      margin-right: -17.5rem !important;
+    }
+  }
+  .me-lg-n24 {
+    @media (width >= 992px) {
+      margin-right: -20rem !important;
+    }
+  }
+  .me-lg-n25 {
+    @media (width >= 992px) {
+      margin-right: -22.5rem !important;
+    }
+  }
+  .mb-lg-n1 {
+    @media (width >= 992px) {
+      margin-bottom: -0.25rem !important;
+    }
+  }
+  .mb-lg-n2 {
+    @media (width >= 992px) {
+      margin-bottom: -0.5rem !important;
+    }
+  }
+  .mb-lg-n3 {
+    @media (width >= 992px) {
+      margin-bottom: -0.75rem !important;
+    }
+  }
+  .mb-lg-n4 {
+    @media (width >= 992px) {
+      margin-bottom: -1rem !important;
+    }
+  }
+  .mb-lg-n5 {
+    @media (width >= 992px) {
+      margin-bottom: -1.25rem !important;
+    }
+  }
+  .mb-lg-n6 {
+    @media (width >= 992px) {
+      margin-bottom: -1.5rem !important;
+    }
+  }
+  .mb-lg-n7 {
+    @media (width >= 992px) {
+      margin-bottom: -1.75rem !important;
+    }
+  }
+  .mb-lg-n8 {
+    @media (width >= 992px) {
+      margin-bottom: -2rem !important;
+    }
+  }
+  .mb-lg-n9 {
+    @media (width >= 992px) {
+      margin-bottom: -2.25rem !important;
+    }
+  }
+  .mb-lg-n10 {
+    @media (width >= 992px) {
+      margin-bottom: -2.5rem !important;
+    }
+  }
+  .mb-lg-n11 {
+    @media (width >= 992px) {
+      margin-bottom: -3rem !important;
+    }
+  }
+  .mb-lg-n12 {
+    @media (width >= 992px) {
+      margin-bottom: -3.5rem !important;
+    }
+  }
+  .mb-lg-n13 {
+    @media (width >= 992px) {
+      margin-bottom: -4rem !important;
+    }
+  }
+  .mb-lg-n14 {
+    @media (width >= 992px) {
+      margin-bottom: -4.5rem !important;
+    }
+  }
+  .mb-lg-n15 {
+    @media (width >= 992px) {
+      margin-bottom: -5rem !important;
+    }
+  }
+  .mb-lg-n16 {
+    @media (width >= 992px) {
+      margin-bottom: -6rem !important;
+    }
+  }
+  .mb-lg-n17 {
+    @media (width >= 992px) {
+      margin-bottom: -7rem !important;
+    }
+  }
+  .mb-lg-n18 {
+    @media (width >= 992px) {
+      margin-bottom: -8rem !important;
+    }
+  }
+  .mb-lg-n19 {
+    @media (width >= 992px) {
+      margin-bottom: -9rem !important;
+    }
+  }
+  .mb-lg-n20 {
+    @media (width >= 992px) {
+      margin-bottom: -10rem !important;
+    }
+  }
+  .mb-lg-n21 {
+    @media (width >= 992px) {
+      margin-bottom: -12.5rem !important;
+    }
+  }
+  .mb-lg-n22 {
+    @media (width >= 992px) {
+      margin-bottom: -15rem !important;
+    }
+  }
+  .mb-lg-n23 {
+    @media (width >= 992px) {
+      margin-bottom: -17.5rem !important;
+    }
+  }
+  .mb-lg-n24 {
+    @media (width >= 992px) {
+      margin-bottom: -20rem !important;
+    }
+  }
+  .mb-lg-n25 {
+    @media (width >= 992px) {
+      margin-bottom: -22.5rem !important;
+    }
+  }
+  .ms-lg-n1 {
+    @media (width >= 992px) {
+      margin-left: -0.25rem !important;
+    }
+  }
+  .ms-lg-n2 {
+    @media (width >= 992px) {
+      margin-left: -0.5rem !important;
+    }
+  }
+  .ms-lg-n3 {
+    @media (width >= 992px) {
+      margin-left: -0.75rem !important;
+    }
+  }
+  .ms-lg-n4 {
+    @media (width >= 992px) {
+      margin-left: -1rem !important;
+    }
+  }
+  .ms-lg-n5 {
+    @media (width >= 992px) {
+      margin-left: -1.25rem !important;
+    }
+  }
+  .ms-lg-n6 {
+    @media (width >= 992px) {
+      margin-left: -1.5rem !important;
+    }
+  }
+  .ms-lg-n7 {
+    @media (width >= 992px) {
+      margin-left: -1.75rem !important;
+    }
+  }
+  .ms-lg-n8 {
+    @media (width >= 992px) {
+      margin-left: -2rem !important;
+    }
+  }
+  .ms-lg-n9 {
+    @media (width >= 992px) {
+      margin-left: -2.25rem !important;
+    }
+  }
+  .ms-lg-n10 {
+    @media (width >= 992px) {
+      margin-left: -2.5rem !important;
+    }
+  }
+  .ms-lg-n11 {
+    @media (width >= 992px) {
+      margin-left: -3rem !important;
+    }
+  }
+  .ms-lg-n12 {
+    @media (width >= 992px) {
+      margin-left: -3.5rem !important;
+    }
+  }
+  .ms-lg-n13 {
+    @media (width >= 992px) {
+      margin-left: -4rem !important;
+    }
+  }
+  .ms-lg-n14 {
+    @media (width >= 992px) {
+      margin-left: -4.5rem !important;
+    }
+  }
+  .ms-lg-n15 {
+    @media (width >= 992px) {
+      margin-left: -5rem !important;
+    }
+  }
+  .ms-lg-n16 {
+    @media (width >= 992px) {
+      margin-left: -6rem !important;
+    }
+  }
+  .ms-lg-n17 {
+    @media (width >= 992px) {
+      margin-left: -7rem !important;
+    }
+  }
+  .ms-lg-n18 {
+    @media (width >= 992px) {
+      margin-left: -8rem !important;
+    }
+  }
+  .ms-lg-n19 {
+    @media (width >= 992px) {
+      margin-left: -9rem !important;
+    }
+  }
+  .ms-lg-n20 {
+    @media (width >= 992px) {
+      margin-left: -10rem !important;
+    }
+  }
+  .ms-lg-n21 {
+    @media (width >= 992px) {
+      margin-left: -12.5rem !important;
+    }
+  }
+  .ms-lg-n22 {
+    @media (width >= 992px) {
+      margin-left: -15rem !important;
+    }
+  }
+  .ms-lg-n23 {
+    @media (width >= 992px) {
+      margin-left: -17.5rem !important;
+    }
+  }
+  .ms-lg-n24 {
+    @media (width >= 992px) {
+      margin-left: -20rem !important;
+    }
+  }
+  .ms-lg-n25 {
+    @media (width >= 992px) {
+      margin-left: -22.5rem !important;
+    }
+  }
+  .p-lg-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+  .p-lg-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+  .p-lg-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-lg-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+  .p-lg-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .p-lg-5 {
+    padding: calc(var(--spacing) * 5);
+  }
+  .p-lg-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+  .p-lg-7 {
+    padding: calc(var(--spacing) * 7);
+  }
+  .p-lg-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+  .p-lg-9 {
+    padding: calc(var(--spacing) * 9);
+  }
+  .p-lg-10 {
+    padding: calc(var(--spacing) * 10);
+  }
+  .p-lg-11 {
+    padding: calc(var(--spacing) * 12);
+  }
+  .p-lg-12 {
+    padding: calc(var(--spacing) * 14);
+  }
+  .p-lg-13 {
+    padding: calc(var(--spacing) * 16);
+  }
+  .p-lg-14 {
+    padding: 4.5rem;
+  }
+  .p-lg-15 {
+    padding: calc(var(--spacing) * 20);
+  }
+  .p-lg-16 {
+    padding: calc(var(--spacing) * 24);
+  }
+  .p-lg-17 {
+    padding: calc(var(--spacing) * 28);
+  }
+  .p-lg-18 {
+    padding: calc(var(--spacing) * 32);
+  }
+  .p-lg-19 {
+    padding: calc(var(--spacing) * 36);
+  }
+  .p-lg-20 {
+    padding: calc(var(--spacing) * 40);
+  }
+  .p-lg-21 {
+    padding: 12.5rem;
+  }
+  .p-lg-22 {
+    padding: calc(var(--spacing) * 60);
+  }
+  .p-lg-23 {
+    padding: 17.5rem;
+  }
+  .p-lg-24 {
+    padding: calc(var(--spacing) * 80);
+  }
+  .p-lg-25 {
+    padding: 22.5rem;
+  }
+  .px-lg-0 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .px-lg-1 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 1) !important;
+    }
+  }
+  .px-lg-2 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .px-lg-3 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .px-lg-4 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .px-lg-5 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .px-lg-6 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .px-lg-7 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .px-lg-8 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .px-lg-9 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .px-lg-10 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .px-lg-11 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .px-lg-12 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .px-lg-13 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .px-lg-14 {
+    @media (width >= 992px) {
+      padding-inline: 4.5rem !important;
+    }
+  }
+  .px-lg-15 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .px-lg-16 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .px-lg-17 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .px-lg-18 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .px-lg-19 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .px-lg-20 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .px-lg-21 {
+    @media (width >= 992px) {
+      padding-inline: 12.5rem !important;
+    }
+  }
+  .px-lg-22 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .px-lg-23 {
+    @media (width >= 992px) {
+      padding-inline: 17.5rem !important;
+    }
+  }
+  .px-lg-24 {
+    @media (width >= 992px) {
+      padding-inline: calc(var(--spacing) * 80) !important;
+    }
+  }
+  .px-lg-25 {
+    @media (width >= 992px) {
+      padding-inline: 22.5rem !important;
+    }
+  }
+  .py-lg-0 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .py-lg-1 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 1) !important;
+    }
+  }
+  .py-lg-2 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .py-lg-3 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .py-lg-4 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .py-lg-5 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .py-lg-6 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .py-lg-7 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .py-lg-8 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .py-lg-9 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .py-lg-10 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .py-lg-11 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .py-lg-12 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .py-lg-13 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .py-lg-14 {
+    @media (width >= 992px) {
+      padding-block: 4.5rem !important;
+    }
+  }
+  .py-lg-15 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .py-lg-16 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .py-lg-17 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .py-lg-18 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .py-lg-19 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .py-lg-20 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .py-lg-21 {
+    @media (width >= 992px) {
+      padding-block: 12.5rem !important;
+    }
+  }
+  .py-lg-22 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .py-lg-23 {
+    @media (width >= 992px) {
+      padding-block: 17.5rem !important;
+    }
+  }
+  .py-lg-24 {
+    @media (width >= 992px) {
+      padding-block: calc(var(--spacing) * 80) !important;
+    }
+  }
+  .py-lg-25 {
+    @media (width >= 992px) {
+      padding-block: 22.5rem !important;
+    }
+  }
+  .ps-lg-0 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .ps-lg-1 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 1) !important;
+    }
+  }
+  .ps-lg-2 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .ps-lg-3 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .ps-lg-4 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .ps-lg-5 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .ps-lg-6 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .ps-lg-7 {
+    @media (width >= 992px) {
+      padding-left: 1.75rem !important;
+    }
+  }
+  .ps-lg-8 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .ps-lg-9 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .ps-lg-10 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .ps-lg-11 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .ps-lg-12 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .ps-lg-13 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .ps-lg-14 {
+    @media (width >= 992px) {
+      padding-left: 4.5rem !important;
+    }
+  }
+  .ps-lg-15 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .ps-lg-16 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .ps-lg-17 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .ps-lg-18 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .ps-lg-19 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .ps-lg-20 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .ps-lg-21 {
+    @media (width >= 992px) {
+      padding-left: 12.5rem !important;
+    }
+  }
+  .ps-lg-22 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .ps-lg-23 {
+    @media (width >= 992px) {
+      padding-left: 17.5rem !important;
+    }
+  }
+  .ps-lg-24 {
+    @media (width >= 992px) {
+      padding-left: calc(var(--spacing) * 80) !important;
+    }
+  }
+  .ps-lg-25 {
+    @media (width >= 992px) {
+      padding-left: 22.5rem !important;
+    }
+  }
+  .gap-lg-0 {
+    gap: calc(var(--spacing) * 0);
+  }
+  .gap-lg-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-lg-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-lg-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-lg-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .gap-lg-5 {
+    gap: calc(var(--spacing) * 5);
+  }
+  .gap-lg-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .gap-lg-7 {
+    gap: calc(var(--spacing) * 7);
+  }
+  .gap-lg-8 {
+    gap: calc(var(--spacing) * 8);
+  }
+  .gap-lg-9 {
+    gap: calc(var(--spacing) * 9);
+  }
+  .gap-lg-10 {
+    gap: calc(var(--spacing) * 10);
+  }
+  .gap-lg-11 {
+    gap: calc(var(--spacing) * 12);
+  }
+  .gap-lg-12 {
+    gap: calc(var(--spacing) * 14);
+  }
+  .gap-lg-13 {
+    gap: calc(var(--spacing) * 16);
+  }
+  .gap-lg-14 {
+    gap: 4.5rem;
+  }
+  .gap-lg-15 {
+    gap: calc(var(--spacing) * 20);
+  }
+  .gap-lg-16 {
+    gap: calc(var(--spacing) * 24);
+  }
+  .gap-lg-17 {
+    gap: calc(var(--spacing) * 28);
+  }
+  .gap-lg-18 {
+    gap: calc(var(--spacing) * 32);
+  }
+  .gap-lg-19 {
+    gap: calc(var(--spacing) * 36);
+  }
+  .gap-lg-20 {
+    gap: calc(var(--spacing) * 40);
+  }
+  .gap-lg-21 {
+    gap: 12.5rem;
+  }
+  .gap-lg-22 {
+    gap: calc(var(--spacing) * 60);
+  }
+  .gap-lg-23 {
+    gap: 17.5rem;
+  }
+  .gap-lg-24 {
+    gap: calc(var(--spacing) * 80);
+  }
+  .gap-lg-25 {
+    gap: 22.5rem;
+  }
+  .row-gap-lg-0 {
+    row-gap: calc(var(--spacing) * 0);
+  }
+  .row-gap-lg-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
+  .row-gap-lg-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
+  .row-gap-lg-3 {
+    row-gap: calc(var(--spacing) * 3);
+  }
+  .row-gap-lg-4 {
+    row-gap: calc(var(--spacing) * 4);
+  }
+  .row-gap-lg-5 {
+    row-gap: calc(var(--spacing) * 5);
+  }
+  .row-gap-lg-6 {
+    row-gap: calc(var(--spacing) * 6);
+  }
+  .row-gap-lg-7 {
+    row-gap: calc(var(--spacing) * 7);
+  }
+  .row-gap-lg-8 {
+    row-gap: calc(var(--spacing) * 8);
+  }
+  .row-gap-lg-9 {
+    row-gap: calc(var(--spacing) * 9);
+  }
+  .row-gap-lg-10 {
+    row-gap: calc(var(--spacing) * 10);
+  }
+  .row-gap-lg-11 {
+    row-gap: calc(var(--spacing) * 12);
+  }
+  .row-gap-lg-12 {
+    row-gap: calc(var(--spacing) * 14);
+  }
+  .row-gap-lg-13 {
+    row-gap: calc(var(--spacing) * 16);
+  }
+  .row-gap-lg-14 {
+    row-gap: 4.5rem;
+  }
+  .row-gap-lg-15 {
+    row-gap: calc(var(--spacing) * 20);
+  }
+  .row-gap-lg-16 {
+    row-gap: calc(var(--spacing) * 24);
+  }
+  .row-gap-lg-17 {
+    row-gap: calc(var(--spacing) * 28);
+  }
+  .row-gap-lg-18 {
+    row-gap: calc(var(--spacing) * 32);
+  }
+  .row-gap-lg-19 {
+    row-gap: calc(var(--spacing) * 36);
+  }
+  .row-gap-lg-20 {
+    row-gap: calc(var(--spacing) * 40);
+  }
+  .row-gap-lg-21 {
+    row-gap: 12.5rem;
+  }
+  .row-gap-lg-22 {
+    row-gap: calc(var(--spacing) * 60);
+  }
+  .row-gap-lg-23 {
+    row-gap: 17.5rem;
+  }
+  .row-gap-lg-24 {
+    row-gap: calc(var(--spacing) * 80);
+  }
+  .row-gap-lg-25 {
+    row-gap: 22.5rem;
+  }
+  .text-lg-start {
+    text-align: left;
+  }
+  .text-lg-end {
+    text-align: right;
+  }
+  .text-lg-center {
+    text-align: center;
+  }
+  .image-wrapper.rounded-lg-start,.map.rounded-lg-start iframe {
+    border-top-left-radius: 0.4rem !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0.4rem !important;
+  }
+  .image-wrapper.rounded-4-lg-start {
+    border-top-left-radius: 0.8rem;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0.8rem;
+  }
+  .navbar-expand-lg.navbar-light .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+    color: #3f78e0;
+  }
+  .navbar-expand-lg .dropdown-mega,.navbar-expand-lg .navbar-nav {
+    position: static;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-lg {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: 1.6rem;
+    padding-bottom: 1.3rem;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-lg .dropdown-lg-content {
+    display: flex;
+    flex-direction: row;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-lg .dropdown-header {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu:before {
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    z-index: -1;
+    display: block;
+    height: 100%;
+    width: 100%;
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-toggle:after {
+    position: absolute;
+    top: 0.15rem;
+    right: calc(var(--spacing) * 4);
+    margin-right: calc(var(--spacing) * 0);
+    font-size: 0.85rem;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu.mega-menu {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .navbar-expand-lg:not(.hover-none) .navbar-nav .dropdown-menu {
+    pointer-events: none;
+    visibility: hidden;
+    top: 120%;
+    display: block;
+    opacity: 0%;
+  }
+  .navbar-expand-lg:not(.hover-none) .navbar-nav .dropdown:not(.dropdown-submenu):hover>.dropdown-menu {
+    visibility: visible;
+    top: 100%;
+    opacity: 100%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.25s;
+    transition-duration: 0.25s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    pointer-events: all;
+  }
+  .navbar-expand-lg:not(.hover-none) .navbar-nav .dropdown-submenu {
+    position: relative;
+  }
+  .navbar-expand-lg:not(.hover-none) .navbar-nav .dropdown-submenu .dropdown-menu {
+    top: 30%;
+  }
+  .navbar-expand-lg:not(.hover-none) .navbar-nav .dropdown-submenu.dropstart:before {
+    position: absolute;
+    left: -1rem;
+    z-index: -1;
+    display: block;
+    height: 100%;
+    width: 100%;
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .navbar-expand-lg:not(.hover-none) .navbar-nav .dropdown-submenu:hover>.dropdown-menu {
+    visibility: visible;
+    top: calc(var(--spacing) * 0);
+    opacity: 100%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.25s;
+    transition-duration: 0.25s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    pointer-events: all;
+  }
+  .navbar-expand-lg .dropend>.dropdown-menu {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-lg .dropstart>.dropdown-menu {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-lg .offcanvas-nav {
+    flex-direction: row;
+    position: unset;
+  }
+  .navbar-expand-lg .offcanvas-nav.offcanvas-end,.navbar-expand-lg .offcanvas-nav.offcanvas-start {
+    width: 100%;
+    translate: none;
+  }
+  .navbar-expand-lg.extended.navbar-bg-light:not(.fixed),.navbar-expand-lg.fancy.navbar-bg-light:not(.fixed) {
+    background-color: inherit;
+  }
+  .navbar-expand-lg.extended:not(.fixed) .navbar-collapse .nav-link {
+    padding-block: 1.15rem;
+  }
+  .navbar-expand-lg.fancy:not(.fixed) .navbar-collapse .nav-link {
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .navbar-expand-lg[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
+    padding-block: 1.7rem;
+  }
+  .navbar-expand-lg.transparent:not(.fixed) {
+    padding-top: 0.3rem;
+  }
+  .navbar-expand-lg.transparent.navbar-clone {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-lg.extended .navbar-collapse-wrapper,.navbar-expand-lg.fancy .navbar-collapse-wrapper {
+    width: 100%;
+    border-radius: 0.4rem;
+    --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.02));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .navbar-expand-lg.extended:not(.extended-alt):not(.fixed) .navbar-collapse-wrapper {
+    padding-block: calc(var(--spacing) * 0);
+    padding-right: calc(var(--spacing) * 6);
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-lg.extended.extended-alt:not(.fixed) .navbar-collapse-wrapper {
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-lg.fancy:not(.fixed) .navbar-collapse-wrapper {
+    margin-top: calc(var(--spacing) * 9);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-lg.extended:not(.extended-alt) .navbar-brand {
+    padding-block: calc(var(--spacing) * 6);
+  }
+  .navbar-expand-lg.extended.extended-alt .navbar-brand {
+    padding-block: calc(var(--spacing) * 7);
+  }
+  .navbar-expand-lg.fixed .topbar {
+    display: none;
+  }
+  .navbar-expand-lg.navbar-dark:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand-lg.navbar-light:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand-lg.transparent.fixed .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-lg .navbar-collapse .nav-link {
+    white-space: nowrap;
+  }
+  .navbar-expand-lg .navbar-collapse .nav-item.parent-link {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .navbar-expand-lg .navbar-collapse .nav-item.parent-link>.nav-link:first-child {
+    padding-right: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-lg .navbar-collapse .nav-item.parent-link .dropdown-toggle {
+    padding-left: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-lg .dropdown-lg-content>div+div,.navbar-expand-lg .mega-menu-content>.row>[class*=col-]+[class*=col-] {
+    @media (width >= 992px) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+    @media (width >= 992px) {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+    @media (width >= 992px) {
+      border-left-color: rgba(164,174,198,0.2);
+    }
+    @media (width >= 1200px) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+    @media (width >= 1200px) {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+    @media (width >= 1200px) {
+      border-left-color: rgba(164,174,198,0.2);
+    }
+  }
+  .navbar-expand-lg .mega-menu-content {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: 0.6rem;
+    padding-bottom: 0.2rem;
+  }
+  .navbar-expand-lg .mega-menu-dark {
+    background-color: #2e353e;
+  }
+  .navbar-expand-lg .mega-menu-dark .img-svg {
+    background-color: rgba(255,255,255,.05);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .navbar-expand-lg .mega-menu-dark .img-svg:hover {
+    background-color: rgba(255,255,255,.09);
+  }
+  .navbar-expand-lg .mega-menu-dark .dropdown-item {
+    color: var(--color-white);
+  }
+  .navbar-expand-lg .mega-menu-dark .dropdown-item:focus,.navbar-expand-lg .mega-menu-dark .dropdown-item:hover {
+    color: var(--color-white);
+  }
+  .navbar-expand-lg .mega-menu-img {
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-lg .mega-menu-img .mega-menu-content {
+    margin-inline: calc(var(--spacing) * 0);
+    margin-block: 1.8rem;
+    padding-inline: calc(var(--spacing) * 8);
+    padding-block: 0.2rem;
+  }
+  .navbar-expand-lg .mega-menu-img .dropdown-item {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-lg.caret-none .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+    display: none;
+  }
+  .mega-menu-scroll {
+    overflow-y: scroll;
+  }
+  .mega-menu-scroll>span {
+    position: absolute;
+    bottom: 0.3rem;
+    left: calc(var(--spacing) * 0);
+    display: flex;
+    height: auto;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 0.7rem;
+    color: #cacaca;
+  }
+  .mega-menu-scroll>span i {
+    font-size: 1rem;
+  }
+  .nav-tabs.nav-justified .nav-item {
+    margin-inline: calc(var(--spacing) * 3);
+    &:first-child {
+      margin-left: calc(var(--spacing) * 0);
+    }
+    &:last-child {
+      margin-right: calc(var(--spacing) * 0);
+    }
+  }
+  .pricing-wrapper .popular .pricing.card {
+    margin-top: -1rem;
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .process-wrapper.line.text-center [class*=col-]:after,.process-wrapper.line.text-center [class*=col-]:before {
+    position: absolute;
+    top: calc(var(--spacing) * 6);
+    left: calc(var(--spacing) * 0);
+    z-index: 1;
+    height: 1px;
+    width: calc(6/12 * 100%);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: rgba(164,174,198,.2);
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .process-wrapper.line.text-center [class*=col-]:after {
+    right: calc(var(--spacing) * 0);
+    left: auto;
+  }
+  .process-wrapper.line.text-center [class*=col-]:first-child:before,.process-wrapper.line.text-center [class*=col-]:last-child:after {
+    display: none;
+  }
+  .process-wrapper.arrow [class*=xl\:w-] {
+    position: relative;
+  }
+  .process-wrapper.arrow [class*=xl\:w-]:nth-child(odd):before {
+    --tw-scale-y: calc(100% * -1);
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+    --tw-scale-x: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .process-wrapper.arrow [class*=xl\:w-]:first-child:before {
+    display: none;
+  }
+  .process-wrapper.arrow [class*=xl\:w-]:before {
+    position: absolute;
+    top: 0.8rem;
+    left: -3rem;
+    z-index: 1;
+    height: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 24);
+    background-size: 70% 70%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    opacity: 0.15;
+    --tw-content: "";
+    content: var(--tw-content);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108.15 19.5'%3E%3Cpath fill='%23747ed1' d='M2.38,13.63A107.77,107.77,0,0,1,41.56,3.28C54.29,2.51,67,4.2,79.4,6.9c7.73,1.68,15.38,3.73,23,5.86a1.56,1.56,0,0,0,.83-3C89.85,6,76.35,2.5,62.54.87A111,111,0,0,0,24,2.73,119,119,0,0,0,.8,10.93c-1.81.85-.23,3.54,1.58,2.7Z'/%3E%3Cpath fill='%23747ed1' d='M95.51,19.27A60.35,60.35,0,0,1,107,12.41a1.58,1.58,0,0,0,1.12-1.29,1.53,1.53,0,0,0-.75-1.56,20.31,20.31,0,0,1-9-8.65,1.56,1.56,0,0,0-2.7,1.57c2.34,4,5.79,7.86,10.12,9.78l.37-2.86a62.69,62.69,0,0,0-12.25,7.18,1.6,1.6,0,0,0-.56,2.14,1.56,1.56,0,0,0,2.13.55Z'/%3E%3C/svg%3E");
+  }
+  .projects-overflow .project-details {
+    position: absolute;
+  }
+  .projects-overflow .item {
+    margin-top: calc(var(--spacing) * 40);
+  }
+}
+@media (max-width:991.98px) {
+  .table-responsive-lg {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .image-wrapper.rounded-top,.map.rounded-top iframe {
+    border-top-left-radius: 0.4rem;
+    border-top-right-radius: 0.4rem;
+  }
+  .image-wrapper.rounded-4-top {
+    border-top-left-radius: 0.8rem;
+    border-top-right-radius: 0.8rem;
+  }
+  .bg-height {
+    height: calc(var(--spacing) * 80);
+  }
+  .navbar-expand-lg .offcanvas-nav {
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .navbar-expand-lg .offcanvas-nav .offcanvas-body,.navbar-expand-lg .offcanvas-nav .offcanvas-footer,.navbar-expand-lg .offcanvas-nav .offcanvas-header {
+    width: 100%;
+  }
+  .navbar-expand-lg .offcanvas-nav .offcanvas-body {
+    flex-grow: 0;
+    overflow-y: unset;
+  }
+  .navbar-expand-lg .navbar-collapse .dropdown-menu {
+    margin-top: calc(var(--spacing) * 0);
+    background-color: inherit;
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
+    padding-block: 0.3rem;
+    padding-left: calc(var(--spacing) * 4);
+    color: var(--color-white);
+  }
+  .navbar-expand-lg .navbar-collapse .nav-link,.navbar-expand-lg .navbar-collapse .nav-link.active,.navbar-expand-lg .navbar-collapse .nav-link:focus,.navbar-expand-lg .navbar-collapse .nav-link:hover,.navbar-expand-lg .navbar-collapse .show>.nav-link {
+    color: var(--color-white) !important;
+  }
+  .navbar-expand-lg .navbar-collapse .nav-link {
+    padding-block: 0.3rem;
+  }
+  .navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
+    position: absolute;
+    top: 0.35rem;
+    right: -0.25rem;
+    margin-right: calc(var(--spacing) * 0);
+    font-size: 0.9rem;
+  }
+  .navbar-expand-lg .navbar-collapse .dropdown-submenu .dropdown-toggle:after {
+    top: 0.3rem;
+  }
+  .navbar-expand-lg .dropdown-header {
+    margin-top: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .navbar-expand-lg .dropend .dropdown-toggle:after,.navbar-expand-lg .dropstart .dropdown-toggle:after {
+    --tw-content: "\e92d";
+    content: var(--tw-content);
+  }
+  .navbar-expand-lg .dropstart .dropdown-menu[data-bs-popper] {
+    margin-right: calc(var(--spacing) * 0);
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .navbar-expand-lg .dropdown-toggle:after {
+    top: calc(var(--spacing) * 1);
+  }
+  .navbar-expand-lg .language-select .dropdown-toggle:after {
+    vertical-align: 0 !important;
+  }
+  .navbar-expand-lg .navbar-other .nav-item.language-select .nav-link {
+    font-size: 1.05rem;
+  }
+  .navbar-expand-lg .navbar-other .nav-item .nav-link>i {
+    font-size: calc(1.255rem + 0.06vw);
+  }
+  .navbar-expand-lg .navbar-brand {
+    padding-block: 1.2rem;
+  }
+  .navbar-expand-lg.fancy .navbar-collapse-wrapper {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    background: 0 0 !important;
+  }
+  .navbar-expand-lg.center-logo.fixed .offcanvas-header .logo-light {
+    display: inline-block;
+  }
+  .navbar-expand-lg.center-logo.fixed .offcanvas-header .logo-dark {
+    display: none;
+  }
+  .navbar-expand-lg .nav-item.parent-link .dropdown-toggle {
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .nav-tabs.d-flex:not(.nav-pills) {
+    justify-content: flex-start;
+  }
+  .card-md-none {
+    border-radius: 0;
+    background-color: var(--color-black);
+  }
+  .card-md-none .card-body {
+    padding: calc(var(--spacing) * 0);
+  }
+  .projects-overflow .project {
+    border-radius: 0.4rem;
+    --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .projects-overflow .project figure img {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .projects-overflow .project-details .card {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .image-wrapper.bg-full {
+    background-size: cover !important;
+  }
+}
+@media (min-width:768px) and (max-width:1023.98px) {
+  .swiper-auto .swiper-slide {
+    width: 600px !important;
+  }
+  .swiper-auto.swiper-auto-xs .swiper-slide {
+    width: 400px !important;
+  }
+}
+@media (min-width:768px) {
+  .navbar-expand-md {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-md .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-md .navbar-nav .nav-link {
+    padding-inline: 1rem;
+  }
+  .navbar-expand-md .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-md .navbar-collapse {
+    display: flex;
+    flex-basis: auto;
+  }
+  .navbar-expand-md .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-md .offcanvas {
+    visibility: visible;
+    position: static;
+    z-index: auto;
+    height: auto;
+    width: auto;
+    flex-grow: 1;
+    transform: none !important;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: none;
+  }
+  .navbar-expand-md .offcanvas .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-md .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    overflow-y: visible;
+    padding: calc(var(--spacing) * 0);
+  }
+  .sticky-md-top {
+    position: sticky;
+    top: calc(var(--spacing) * 0);
+    z-index: 1020;
+  }
+  .sticky-md-bottom {
+    position: sticky;
+    bottom: calc(var(--spacing) * 0);
+    z-index: 1020;
+  }
+  .text-md-center {
+    text-align: center;
+  }
+  .page-frame {
+    padding: calc(var(--spacing) * 5);
+  }
+  .page-frame .video-wrapper,.page-frame .video-wrapper video,.page-frame .video-wrapper:after,.page-frame footer,.page-frame section {
+    border-radius: var(--radius-2xl);
+  }
+  .itooltip-inner {
+    z-index: 10;
+    animation: 0.15s linear fadeIn;
+    border-radius: 0.4rem;
+    background-color: rgba(255,255,255,.9);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: 0.7rem;
+    color: inherit;
+    --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-shadow: var(--shadow);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .itooltip-light.itooltip-inner {
+    background-color: rgba(255,255,255,.9);
+    color: inherit;
+    --tw-shadow: 0 0 1.25rem var(--tw-shadow-color, rgba(30,34,40,0.04));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .itooltip-dark.itooltip-inner {
+    background-color: rgba(30,34,40,.9);
+  }
+  .itooltip-color.itooltip-inner {
+    background-color: rgba(63,120,224,.9);
+  }
+  .itooltip-blue.itooltip-inner {
+    background-color: rgba(63,120,224,.9);
+  }
+  .itooltip-sky.itooltip-inner {
+    background-color: rgba(94,185,240,.9);
+  }
+  .itooltip-purple.itooltip-inner {
+    background-color: rgba(116,126,209,.9);
+  }
+  .itooltip-grape.itooltip-inner {
+    background-color: rgba(96,93,186,.9);
+  }
+  .itooltip-violet.itooltip-inner {
+    background-color: rgba(160,124,197,.9);
+  }
+  .itooltip-pink.itooltip-inner {
+    background-color: rgba(209,107,134,.9);
+  }
+  .itooltip-fuchsia.itooltip-inner {
+    background-color: rgba(230,104,179,.9);
+  }
+  .itooltip-red.itooltip-inner {
+    background-color: rgba(226,98,107,.9);
+  }
+  .itooltip-orange.itooltip-inner {
+    background-color: rgba(247,139,119,.9);
+  }
+  .itooltip-yellow.itooltip-inner {
+    background-color: rgba(250,183,88,.9);
+  }
+  .itooltip-green.itooltip-inner {
+    background-color: rgba(69,196,160,.9);
+  }
+  .itooltip-leaf.itooltip-inner {
+    background-color: rgba(124,183,152,.9);
+  }
+  .itooltip-aqua.itooltip-inner {
+    background-color: rgba(84,168,199,.9);
+  }
+  .itooltip-navy.itooltip-inner {
+    background-color: rgba(52,63,82,.9);
+  }
+  .itooltip-ash.itooltip-inner {
+    background-color: rgba(148,153,163,.9);
+  }
+  .itooltip-white.itooltip-inner {
+    background-color: rgba(255,255,255,.9);
+  }
+  .itooltip-light.itooltip-inner {
+    background-color: rgba(254,254,254,.9);
+  }
+  .itooltip-gray.itooltip-inner {
+    background-color: rgba(246,247,249,.9);
+  }
+  .itooltip-primary.itooltip-inner {
+    background-color: rgba(63,120,224,.9);
+  }
+  .itooltip-secondary.itooltip-inner {
+    background-color: rgba(170,176,188,.9);
+  }
+  .itooltip-success.itooltip-inner {
+    background-color: rgba(69,196,160,.9);
+  }
+  .itooltip-info.itooltip-inner {
+    background-color: rgba(84,168,199,.9);
+  }
+  .itooltip-warning.itooltip-inner {
+    background-color: rgba(250,183,88,.9);
+  }
+  .itooltip-danger.itooltip-inner {
+    background-color: rgba(226,98,107,.9);
+  }
+  [class*=itooltip-]:not(.itooltip-light).itooltip-inner * {
+    color: var(--color-white);
+  }
+  .section-frame.br-fix {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .section-frame-wrapper {
+    border-radius: var(--radius-2xl);
+  }
+  .navbar-expand-md.navbar-light .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+    color: #3f78e0;
+  }
+  .navbar-expand-md .dropdown-mega,.navbar-expand-md .navbar-nav {
+    position: static;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu.dropdown-lg {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: 1.6rem;
+    padding-bottom: 1.3rem;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu.dropdown-lg .dropdown-lg-content {
+    display: flex;
+    flex-direction: row;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu.dropdown-lg .dropdown-header {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu:before {
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    z-index: -1;
+    display: block;
+    height: 100%;
+    width: 100%;
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu .dropdown-toggle:after {
+    position: absolute;
+    top: 0.15rem;
+    right: calc(var(--spacing) * 4);
+    margin-right: calc(var(--spacing) * 0);
+    font-size: 0.85rem;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu.mega-menu {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .navbar-expand-md:not(.hover-none) .navbar-nav .dropdown-menu {
+    pointer-events: none;
+    visibility: hidden;
+    top: 120%;
+    display: block;
+    opacity: 0%;
+  }
+  .navbar-expand-md:not(.hover-none) .navbar-nav .dropdown:not(.dropdown-submenu):hover>.dropdown-menu {
+    visibility: visible;
+    top: 100%;
+    opacity: 100%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.25s;
+    transition-duration: 0.25s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    pointer-events: all;
+  }
+  .navbar-expand-md:not(.hover-none) .navbar-nav .dropdown-submenu {
+    position: relative;
+  }
+  .navbar-expand-md:not(.hover-none) .navbar-nav .dropdown-submenu .dropdown-menu {
+    top: 30%;
+  }
+  .navbar-expand-md:not(.hover-none) .navbar-nav .dropdown-submenu.dropstart:before {
+    position: absolute;
+    left: -1rem;
+    z-index: -1;
+    display: block;
+    height: 100%;
+    width: 100%;
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .navbar-expand-md:not(.hover-none) .navbar-nav .dropdown-submenu:hover>.dropdown-menu {
+    visibility: visible;
+    top: calc(var(--spacing) * 0);
+    opacity: 100%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.25s;
+    transition-duration: 0.25s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    pointer-events: all;
+  }
+  .navbar-expand-md .dropend>.dropdown-menu {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-md .dropstart>.dropdown-menu {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-md .offcanvas-nav {
+    flex-direction: row;
+    position: unset;
+  }
+  .navbar-expand-md .offcanvas-nav.offcanvas-end,.navbar-expand-md .offcanvas-nav.offcanvas-start {
+    width: 100%;
+  }
+  .navbar-expand-md.extended.navbar-bg-light:not(.fixed),.navbar-expand-md.fancy.navbar-bg-light:not(.fixed) {
+    background-color: inherit;
+  }
+  .navbar-expand-md.extended:not(.fixed) .navbar-collapse .nav-link {
+    padding-block: 1.15rem;
+  }
+  .navbar-expand-md.fancy:not(.fixed) .navbar-collapse .nav-link {
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .navbar-expand-md[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
+    padding-block: 1.7rem;
+  }
+  .navbar-expand-md.extended .navbar-collapse-wrapper,.navbar-expand-md.fancy .navbar-collapse-wrapper {
+    width: 100%;
+    border-radius: 0.4rem;
+    --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.02));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .navbar-expand-md.extended:not(.extended-alt):not(.fixed) .navbar-collapse-wrapper {
+    padding-block: calc(var(--spacing) * 0);
+    padding-right: calc(var(--spacing) * 6);
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-md.extended.extended-alt:not(.fixed) .navbar-collapse-wrapper {
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-md.fancy:not(.fixed) .navbar-collapse-wrapper {
+    margin-top: calc(var(--spacing) * 9);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-md.extended:not(.extended-alt) .navbar-brand {
+    padding-block: calc(var(--spacing) * 6);
+  }
+  .navbar-expand-md.extended.extended-alt .navbar-brand {
+    padding-block: calc(var(--spacing) * 7);
+  }
+  .navbar-expand-md.fixed .topbar {
+    display: none;
+  }
+  .navbar-expand-md.navbar-dark:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand-md.navbar-light:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand-md.transparent.fixed .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-md .navbar-collapse .nav-link {
+    white-space: nowrap;
+  }
+  .navbar-expand-md .navbar-collapse .nav-item.parent-link {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .navbar-expand-md .navbar-collapse .nav-item.parent-link>.nav-link:first-child {
+    padding-right: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-md .navbar-collapse .nav-item.parent-link .dropdown-toggle {
+    padding-left: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-md .dropdown-lg-content>div+div,.navbar-expand-md .mega-menu-content>.row>[class*=col-]+[class*=col-] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-left-color: rgba(164,174,198,0.2);
+  }
+  .navbar-expand-md .mega-menu-content {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: 0.6rem;
+    padding-bottom: 0.2rem;
+  }
+  .navbar-expand-md .mega-menu-dark {
+    background-color: #2e353e;
+  }
+  .navbar-expand-md .mega-menu-dark .img-svg {
+    background-color: rgba(255,255,255,.05);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .navbar-expand-md .mega-menu-dark .img-svg:hover {
+    background-color: rgba(255,255,255,.09);
+  }
+  .navbar-expand-md .mega-menu-dark .dropdown-item {
+    color: var(--color-white);
+  }
+  .navbar-expand-md .mega-menu-dark .dropdown-item:focus,.navbar-expand-md .mega-menu-dark .dropdown-item:hover {
+    color: var(--color-white);
+  }
+  .navbar-expand-md .mega-menu-img {
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-md .mega-menu-img .mega-menu-content {
+    margin-inline: calc(var(--spacing) * 0);
+    margin-block: 1.8rem;
+    padding-inline: calc(var(--spacing) * 8);
+    padding-block: 0.2rem;
+  }
+  .navbar-expand-md .mega-menu-img .dropdown-item {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-md.caret-none .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+    display: none;
+  }
+  .glightbox-clean .gprev {
+    top: calc(2/4 * 100%);
+    --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    &::before {
+      content: var(--tw-content);
+      font-family: var(--font-Unicons);
+    }
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e949';
+      content: var(--tw-content);
+    }
+  }
+  .glightbox-clean .gnext {
+    top: calc(2/4 * 100%);
+    --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    &::before {
+      content: var(--tw-content);
+      font-family: var(--font-Unicons);
+    }
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\e94c';
+      content: var(--tw-content);
+    }
+  }
+  .glightbox-clean .gclose {
+    top: 0.75rem;
+    right: 0.75rem;
+    &::after {
+      content: var(--tw-content);
+      font-family: var(--font-Unicons);
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '\ed3b';
+      content: var(--tw-content);
+    }
+  }
+  .glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev {
+    margin-top: calc(var(--spacing) * 0);
+    display: flex;
+    height: 2.2rem;
+    width: 2.2rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100% !important;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: rgba(0,0,0,.3);
+    padding: calc(var(--spacing) * 0);
+    font-size: 1.2rem;
+    --tw-leading: 2.2rem;
+    line-height: 2.2rem;
+    color: var(--color-white);
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: background;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .glightbox-clean .gclose.disabled, .glightbox-clean .gnext.disabled, .glightbox-clean .gprev.disabled {
+    display: none;
+  }
+  .glightbox-clean .gslide-description {
+    background-color: transparent;
+  }
+  .glightbox-clean .gdesc-inner {
+    padding: 1rem 0 1rem 0;
+    text-align: center;
+  }
+  .glightbox-clean .gdesc-inner .gslide-desc, .glightbox-clean .gdesc-inner .gslide-title {
+    color: var(--color-white);
+  }
+  .glightbox-clean .gdesc-inner .gslide-title {
+    margin: calc(var(--spacing) * 0);
+  }
+  .glightbox-clean .gdesc-inner .gslide-title+.gslide-desc {
+    margin-top: 0.3rem;
+  }
+  .timeline .timeline-item,.timeline .timeline-item .timeline-marker {
+    display: table-cell;
+    vertical-align: top;
+  }
+  .timeline .timeline-item .timeline-content .timeline-title {
+    margin-top: -0.25rem;
+  }
+  .projects-tiles .project {
+    margin-top: calc(var(--spacing) * 40);
+  }
+  .projects-tiles .project-details {
+    padding: calc(var(--spacing) * 8);
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+  .overlap-grid-2 .item:nth-child(3) {
+    z-index: 2;
+    margin-top: -35%;
+    margin-left: 40%;
+    width: calc(3/5 * 100%);
+  }
+}
+@media screen and (min-width:768px) {
+  .mb-md-n50p {
+    @media (width >= 768px) {
+      --tw-translate-y: calc(2/4 * 100%) !important;
+      translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+    }
+  }
+  .mt-md-n50p {
+    @media (width >= 768px) {
+      --tw-translate-y: calc(calc(2/4 * 100%) * -1) !important;
+      translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+    }
+  }
+}
+@media (max-width:767px) {
+  #comments .user-avatar {
+    display: none;
+  }
+  #comments ul.children {
+    padding-left: calc(var(--spacing) * 6);
+  }
+  #comments ul.children li.comment:before {
+    display: none;
+  }
+  .bg-map {
+    background: 0 0 !important;
+  }
+  .bg-height {
+    height: calc(var(--spacing) * 60);
+  }
+  .card-footer .post-meta li.post-author,.card-footer .post-meta li.post-comments span {
+    display: none;
+  }
+  .post-header .post-meta li.post-author,.post-header .post-meta li.post-comments span,.post-header .post-meta li.post-likes span {
+    display: none;
+  }
+  .nav-tabs.nav-pills,.nav-tabs.nav-tabs-basic {
+    flex-direction: column;
+  }
+  .nav-tabs.nav-pills .nav-item,.nav-tabs.nav-tabs-basic .nav-item {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .nav-tabs.nav-pills .nav-link,.nav-tabs.nav-tabs-basic .nav-link {
+    margin-right: calc(var(--spacing) * 0);
+  }
+  .alert[class*=bg-].alert-dismissible .btn-close {
+    padding-right: calc(var(--spacing) * 2);
+  }
+  .caption-wrapper {
+    display: none;
+  }
+  .swiper-hero,.swiper-hero .swiper-slide {
+    height: 500px;
+  }
+  .swiper-hero .swiper-navigation {
+    display: none;
+  }
+  .swiper-fullscreen,.swiper-fullscreen .swiper:not(.swiper-thumbs) .swiper-slide {
+    height: 500px;
+  }
+  .swiper-auto.swiper-auto-xs .swiper-slide {
+    width: 300px !important;
+  }
+  .projects-tiles .project {
+    margin-top: calc(var(--spacing) * 20);
+  }
+  .overlap-grid-2 .item {
+    width: 100%;
+  }
+  .overlap-grid-2 .item+.item {
+    margin-top: calc(var(--spacing) * 6);
+  }
+}
+@media (max-width:767.98px) {
+  .table-responsive-md {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .navbar-expand-md .offcanvas-nav {
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .navbar-expand-md .offcanvas-nav .offcanvas-body,.navbar-expand-md .offcanvas-nav .offcanvas-footer,.navbar-expand-md .offcanvas-nav .offcanvas-header {
+    width: 100%;
+  }
+  .navbar-expand-md .offcanvas-nav .offcanvas-body {
+    flex-grow: 0;
+    overflow-y: unset;
+  }
+  .navbar-expand-md .navbar-collapse .dropdown-menu {
+    margin-top: calc(var(--spacing) * 0);
+    background-color: var(--color-black);
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item {
+    padding-block: 0.3rem;
+    padding-left: calc(var(--spacing) * 4);
+    color: var(--color-white);
+  }
+  .navbar-expand-md .navbar-collapse .nav-link,.navbar-expand-md .navbar-collapse .nav-link.active,.navbar-expand-md .navbar-collapse .nav-link:focus,.navbar-expand-md .navbar-collapse .nav-link:hover,.navbar-expand-md .navbar-collapse .show>.nav-link {
+    color: var(--color-white);
+  }
+  .navbar-expand-md .navbar-collapse .nav-link {
+    padding-block: 0.3rem;
+  }
+  .navbar-expand-md .navbar-collapse .dropdown-toggle:after {
+    position: absolute;
+    top: 0.35rem;
+    right: -0.25rem;
+    margin-right: calc(var(--spacing) * 0);
+    font-size: 0.9rem;
+  }
+  .navbar-expand-md .navbar-collapse .dropdown-submenu .dropdown-toggle:after {
+    top: 0.3rem;
+  }
+  .navbar-expand-md .dropdown-header {
+    margin-top: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .navbar-expand-md .dropend .dropdown-toggle:after,.navbar-expand-md .dropstart .dropdown-toggle:after {
+    --tw-content: "\e92d";
+    content: var(--tw-content);
+  }
+  .navbar-expand-md .dropstart .dropdown-menu[data-bs-popper] {
+    margin-right: calc(var(--spacing) * 0);
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .navbar-expand-md .dropdown-toggle:after {
+    top: calc(var(--spacing) * 1);
+  }
+  .navbar-expand-md .language-select .dropdown-toggle:after {
+    vertical-align: 0 !important;
+  }
+  .navbar-expand-md .navbar-other .nav-item.language-select .nav-link {
+    font-size: 1.05rem;
+  }
+  .navbar-expand-md .navbar-other .nav-item .nav-link>i {
+    font-size: calc(1.255rem + 0.06vw);
+  }
+  .navbar-expand-md .navbar-brand {
+    padding-block: 1.2rem;
+  }
+  .navbar-expand-md.fancy .navbar-collapse-wrapper {
+    background-color: var(--color-black) !important;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .navbar-expand-md.center-logo.fixed .offcanvas-header .logo-light {
+    display: inline-block;
+  }
+  .navbar-expand-md.center-logo.fixed .offcanvas-header .logo-dark {
+    display: none;
+  }
+  .navbar-expand-md .nav-item.parent-link .dropdown-toggle {
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .modal.fade.modal-bottom-center .modal-dialog {
+    width: calc(100% - 1rem);
+  }
+}
+@media (min-width:576px) {
+  .card-group {
+    display: flex;
+    flex-flow: row wrap;
+  }
+  .card-group>.card {
+    margin-bottom: calc(var(--spacing) * 0);
+    flex: 1 0 0%;
+  }
+  .card-group>.card+.card {
+    margin-left: calc(var(--spacing) * 0);
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0px;
+  }
+  .card-group>.card:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top {
+    border-top-right-radius: 0;
+  }
+  .card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom {
+    border-bottom-right-radius: 0;
+  }
+  .card-group>.card:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top {
+    border-top-left-radius: 0;
+  }
+  .card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom {
+    border-bottom-left-radius: 0;
+  }
+  .modal {
+    margin: 1.75rem;
+    box-shadow: 0rem 0rem 1.25rem rgba(30, 34, 40, 0.04);
+  }
+  .modal-dialog {
+    margin-inline: auto;
+    max-width: 560px;
+  }
+  .modal-sm {
+    width: 450px;
+  }
+  .sticky-sm-top {
+    position: sticky;
+    top: calc(var(--spacing) * 0);
+    z-index: 1020;
+  }
+  .sticky-sm-bottom {
+    position: sticky;
+    bottom: calc(var(--spacing) * 0);
+    z-index: 1020;
+  }
+  .float-sm-start {
+    float: left;
+  }
+  .float-sm-end {
+    float: right;
+  }
+  .float-sm-none {
+    float: none;
+  }
+  .object-fit-sm-contain {
+    object-fit: contain;
+    -o-object-fit: contain !important;
+  }
+  .object-fit-sm-cover {
+    object-fit: cover;
+    -o-object-fit: cover !important;
+  }
+  .object-fit-sm-fill {
+    object-fit: fill;
+    -o-object-fit: fill !important;
+  }
+  .object-fit-sm-scale {
+    object-fit: scale-down;
+    -o-object-fit: scale-down !important;
+  }
+  .object-fit-sm-none {
+    object-fit: none;
+    -o-object-fit: none !important;
+  }
+  .d-sm-inline {
+    display: inline;
+  }
+  .d-sm-inline-block {
+    display: inline-block;
+  }
+  .d-sm-block {
+    display: block;
+  }
+  .d-sm-grid {
+    display: grid;
+  }
+  .d-sm-inline-grid {
+    display: inline-grid;
+  }
+  .d-sm-table {
+    display: table;
+  }
+  .d-sm-table-row {
+    display: table-row;
+  }
+  .d-sm-table-cell {
+    display: table-cell;
+  }
+  .d-sm-flex {
+    display: flex;
+  }
+  .d-sm-inline-flex {
+    display: inline-flex;
+  }
+  .d-sm-none {
+    display: none;
+  }
+  .flex-sm-fill {
+    flex: auto;
+  }
+  .flex-sm-row {
+    flex-direction: row;
+  }
+  .flex-sm-column {
+    flex-direction: column;
+  }
+  .flex-sm-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .flex-sm-column-reverse {
+    flex-direction: column-reverse;
+  }
+  .flex-sm-grow-0 {
+    flex-grow: 0;
+  }
+  .flex-sm-grow-1 {
+    flex-grow: 1;
+  }
+  .flex-sm-shrink-0 {
+    flex-shrink: 0;
+  }
+  .flex-sm-shrink-1 {
+    flex-shrink: 1;
+  }
+  .flex-sm-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-sm-nowrap {
+    flex-wrap: nowrap;
+  }
+  .flex-sm-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .justify-content-sm-start {
+    justify-content: flex-start;
+  }
+  .justify-content-sm-end {
+    justify-content: flex-end;
+  }
+  .justify-content-sm-center {
+    justify-content: center;
+  }
+  .justify-content-sm-between {
+    justify-content: space-between;
+  }
+  .justify-content-sm-around {
+    justify-content: space-around;
+  }
+  .justify-content-sm-evenly {
+    justify-content: space-evenly;
+  }
+  .align-items-sm-start {
+    align-items: flex-start;
+  }
+  .align-items-sm-end {
+    align-items: flex-end;
+  }
+  .align-items-sm-center {
+    align-items: center;
+  }
+  .align-items-sm-baseline {
+    align-items: baseline;
+  }
+  .align-items-sm-stretch {
+    align-items: stretch;
+  }
+  .order-sm-first {
+    order: calc(1 * -1);
+  }
+  .order-sm-0 {
+    order: 0;
+  }
+  .order-sm-1 {
+    order: 1;
+  }
+  .order-sm-2 {
+    order: 2;
+  }
+  .order-sm-3 {
+    order: 3;
+  }
+  .order-sm-4 {
+    order: 4;
+  }
+  .order-sm-5 {
+    order: 5;
+  }
+  .order-sm-last {
+    order: 6;
+  }
+  .m-sm-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .m-sm-1 {
+    margin: calc(var(--spacing) * 1);
+  }
+  .m-sm-2 {
+    margin: calc(var(--spacing) * 2);
+  }
+  .m-sm-3 {
+    margin: calc(var(--spacing) * 3);
+  }
+  .m-sm-4 {
+    margin: calc(var(--spacing) * 4);
+  }
+  .m-sm-5 {
+    margin: calc(var(--spacing) * 5);
+  }
+  .m-sm-6 {
+    margin: calc(var(--spacing) * 6);
+  }
+  .m-sm-7 {
+    margin: calc(var(--spacing) * 7);
+  }
+  .m-sm-8 {
+    margin: calc(var(--spacing) * 8);
+  }
+  .m-sm-9 {
+    margin: calc(var(--spacing) * 9);
+  }
+  .m-sm-10 {
+    margin: calc(var(--spacing) * 10);
+  }
+  .m-sm-11 {
+    margin: calc(var(--spacing) * 12);
+  }
+  .m-sm-12 {
+    margin: calc(var(--spacing) * 14);
+  }
+  .m-sm-13 {
+    margin: calc(var(--spacing) * 16);
+  }
+  .m-sm-14 {
+    margin: 4.5rem;
+  }
+  .m-sm-15 {
+    margin: calc(var(--spacing) * 20);
+  }
+  .m-sm-16 {
+    margin: calc(var(--spacing) * 24);
+  }
+  .m-sm-17 {
+    margin: calc(var(--spacing) * 28);
+  }
+  .m-sm-18 {
+    margin: calc(var(--spacing) * 32);
+  }
+  .m-sm-19 {
+    margin: calc(var(--spacing) * 36);
+  }
+  .m-sm-20 {
+    margin: calc(var(--spacing) * 40);
+  }
+  .m-sm-21 {
+    margin: 12.5rem;
+  }
+  .m-sm-22 {
+    margin: calc(var(--spacing) * 60);
+  }
+  .m-sm-23 {
+    margin: 17.5rem;
+  }
+  .m-sm-24 {
+    margin: calc(var(--spacing) * 80);
+  }
+  .m-sm-25 {
+    margin: 22.5rem;
+  }
+  .m-sm-auto {
+    margin: auto;
+  }
+  .mx-sm-0 {
+    margin-inline: calc(var(--spacing) * 0);
+  }
+  .mx-sm-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+  .mx-sm-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
+  .mx-sm-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .mx-sm-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
+  .mx-sm-5 {
+    margin-inline: calc(var(--spacing) * 5);
+  }
+  .mx-sm-6 {
+    margin-inline: calc(var(--spacing) * 6);
+  }
+  .mx-sm-7 {
+    margin-inline: calc(var(--spacing) * 7);
+  }
+  .mx-sm-8 {
+    margin-inline: calc(var(--spacing) * 8);
+  }
+  .mx-sm-9 {
+    margin-inline: calc(var(--spacing) * 9);
+  }
+  .mx-sm-10 {
+    margin-inline: calc(var(--spacing) * 10);
+  }
+  .mx-sm-11 {
+    margin-inline: calc(var(--spacing) * 12);
+  }
+  .mx-sm-12 {
+    margin-inline: calc(var(--spacing) * 14);
+  }
+  .mx-sm-13 {
+    margin-inline: calc(var(--spacing) * 16);
+  }
+  .mx-sm-14 {
+    margin-inline: 4.5rem;
+  }
+  .mx-sm-15 {
+    margin-inline: calc(var(--spacing) * 20);
+  }
+  .mx-sm-16 {
+    margin-inline: calc(var(--spacing) * 24);
+  }
+  .mx-sm-17 {
+    margin-inline: calc(var(--spacing) * 28);
+  }
+  .mx-sm-18 {
+    margin-inline: calc(var(--spacing) * 32);
+  }
+  .mx-sm-19 {
+    margin-inline: calc(var(--spacing) * 36);
+  }
+  .mx-sm-20 {
+    margin-inline: calc(var(--spacing) * 40);
+  }
+  .mx-sm-21 {
+    margin-inline: 12.5rem;
+  }
+  .mx-sm-22 {
+    margin-inline: calc(var(--spacing) * 60);
+  }
+  .mx-sm-23 {
+    margin-inline: 17.5rem;
+  }
+  .mx-sm-24 {
+    margin-inline: calc(var(--spacing) * 80);
+  }
+  .mx-sm-25 {
+    margin-inline: 22.5rem;
+  }
+  .mx-sm-auto {
+    margin-inline: auto;
+  }
+  .my-sm-0 {
+    margin-block: calc(var(--spacing) * 0);
+  }
+  .my-sm-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+  .my-sm-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .my-sm-3 {
+    margin-block: calc(var(--spacing) * 3);
+  }
+  .my-sm-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .my-sm-5 {
+    margin-block: calc(var(--spacing) * 5);
+  }
+  .my-sm-6 {
+    margin-block: calc(var(--spacing) * 6);
+  }
+  .my-sm-7 {
+    margin-block: calc(var(--spacing) * 7);
+  }
+  .my-sm-8 {
+    margin-block: calc(var(--spacing) * 8);
+  }
+  .my-sm-9 {
+    margin-block: calc(var(--spacing) * 9);
+  }
+  .my-sm-10 {
+    margin-block: calc(var(--spacing) * 10);
+  }
+  .my-sm-11 {
+    margin-block: calc(var(--spacing) * 12);
+  }
+  .my-sm-12 {
+    margin-block: calc(var(--spacing) * 14);
+  }
+  .my-sm-13 {
+    margin-block: calc(var(--spacing) * 16);
+  }
+  .my-sm-14 {
+    margin-block: 4.5rem;
+  }
+  .my-sm-15 {
+    margin-block: calc(var(--spacing) * 20);
+  }
+  .my-sm-16 {
+    margin-block: calc(var(--spacing) * 24);
+  }
+  .my-sm-17 {
+    margin-block: calc(var(--spacing) * 28);
+  }
+  .my-sm-18 {
+    margin-block: calc(var(--spacing) * 32);
+  }
+  .my-sm-19 {
+    margin-block: calc(var(--spacing) * 36);
+  }
+  .my-sm-20 {
+    margin-block: calc(var(--spacing) * 40);
+  }
+  .my-sm-21 {
+    margin-block: 12.5rem;
+  }
+  .my-sm-22 {
+    margin-block: calc(var(--spacing) * 60);
+  }
+  .my-sm-23 {
+    margin-block: 17.5rem;
+  }
+  .my-sm-24 {
+    margin-block: calc(var(--spacing) * 80);
+  }
+  .my-sm-25 {
+    margin-block: 22.5rem;
+  }
+  .my-sm-auto {
+    margin-block: auto;
+  }
+  .mt-sm-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
+  .mt-sm-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-sm-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-sm-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mt-sm-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .mt-sm-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+  .mt-sm-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .mt-sm-7 {
+    margin-top: calc(var(--spacing) * 7);
+  }
+  .mt-sm-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+  .mt-sm-9 {
+    margin-top: calc(var(--spacing) * 9);
+  }
+  .mt-sm-10 {
+    margin-top: calc(var(--spacing) * 10);
+  }
+  .mt-sm-11 {
+    margin-top: calc(var(--spacing) * 12);
+  }
+  .mt-sm-12 {
+    margin-top: calc(var(--spacing) * 14);
+  }
+  .mt-sm-13 {
+    margin-top: calc(var(--spacing) * 16);
+  }
+  .mt-sm-14 {
+    margin-top: 4.5rem;
+  }
+  .mt-sm-15 {
+    margin-top: calc(var(--spacing) * 20);
+  }
+  .mt-sm-16 {
+    margin-top: calc(var(--spacing) * 24);
+  }
+  .mt-sm-17 {
+    margin-top: calc(var(--spacing) * 28);
+  }
+  .mt-sm-18 {
+    margin-top: calc(var(--spacing) * 32);
+  }
+  .mt-sm-19 {
+    margin-top: calc(var(--spacing) * 36);
+  }
+  .mt-sm-20 {
+    margin-top: calc(var(--spacing) * 40);
+  }
+  .mt-sm-21 {
+    margin-top: 12.5rem;
+  }
+  .mt-sm-22 {
+    margin-top: calc(var(--spacing) * 60);
+  }
+  .mt-sm-23 {
+    margin-top: 17.5rem;
+  }
+  .mt-sm-24 {
+    margin-top: calc(var(--spacing) * 80);
+  }
+  .mt-sm-25 {
+    margin-top: 22.5rem;
+  }
+  .mt-sm-auto {
+    margin-top: auto;
+  }
+  .me-sm-0 {
+    margin-right: calc(var(--spacing) * 0);
+  }
+  .me-sm-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+  .me-sm-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .me-sm-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
+  .me-sm-4 {
+    margin-right: calc(var(--spacing) * 4);
+  }
+  .me-sm-5 {
+    margin-right: calc(var(--spacing) * 5);
+  }
+  .me-sm-6 {
+    margin-right: calc(var(--spacing) * 6);
+  }
+  .me-sm-7 {
+    margin-right: calc(var(--spacing) * 7);
+  }
+  .me-sm-8 {
+    margin-right: calc(var(--spacing) * 8);
+  }
+  .me-sm-9 {
+    margin-right: calc(var(--spacing) * 9);
+  }
+  .me-sm-10 {
+    margin-right: calc(var(--spacing) * 10);
+  }
+  .me-sm-11 {
+    margin-right: calc(var(--spacing) * 12);
+  }
+  .me-sm-12 {
+    margin-right: calc(var(--spacing) * 14);
+  }
+  .me-sm-13 {
+    margin-right: calc(var(--spacing) * 16);
+  }
+  .me-sm-14 {
+    margin-right: 4.5rem;
+  }
+  .me-sm-15 {
+    margin-right: calc(var(--spacing) * 20);
+  }
+  .me-sm-16 {
+    margin-right: calc(var(--spacing) * 24);
+  }
+  .me-sm-17 {
+    margin-right: calc(var(--spacing) * 28);
+  }
+  .me-sm-18 {
+    margin-right: calc(var(--spacing) * 32);
+  }
+  .me-sm-19 {
+    margin-right: calc(var(--spacing) * 36);
+  }
+  .me-sm-20 {
+    margin-right: calc(var(--spacing) * 40);
+  }
+  .me-sm-21 {
+    margin-right: 12.5rem;
+  }
+  .me-sm-22 {
+    margin-right: calc(var(--spacing) * 60);
+  }
+  .me-sm-23 {
+    margin-right: 17.5rem;
+  }
+  .me-sm-24 {
+    margin-right: calc(var(--spacing) * 80);
+  }
+  .me-sm-25 {
+    margin-right: 22.5rem;
+  }
+  .me-sm-auto {
+    margin-right: auto;
+  }
+  .mb-sm-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+  .mb-sm-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  .mb-sm-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-sm-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .mb-sm-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-sm-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
+  .mb-sm-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .mb-sm-7 {
+    margin-bottom: calc(var(--spacing) * 7);
+  }
+  .mb-sm-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  .mb-sm-9 {
+    margin-bottom: calc(var(--spacing) * 9);
+  }
+  .mb-sm-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
+  .mb-sm-11 {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
+  .mb-sm-12 {
+    margin-bottom: calc(var(--spacing) * 14);
+  }
+  .mb-sm-13 {
+    margin-bottom: calc(var(--spacing) * 16);
+  }
+  .mb-sm-14 {
+    margin-bottom: 4.5rem;
+  }
+  .mb-sm-15 {
+    margin-bottom: calc(var(--spacing) * 20);
+  }
+  .mb-sm-16 {
+    margin-bottom: calc(var(--spacing) * 24);
+  }
+  .mb-sm-17 {
+    margin-bottom: calc(var(--spacing) * 28);
+  }
+  .mb-sm-18 {
+    margin-bottom: calc(var(--spacing) * 32);
+  }
+  .mb-sm-19 {
+    margin-bottom: calc(var(--spacing) * 36);
+  }
+  .mb-sm-20 {
+    margin-bottom: calc(var(--spacing) * 40);
+  }
+  .mb-sm-21 {
+    margin-bottom: 12.5rem;
+  }
+  .mb-sm-22 {
+    margin-bottom: calc(var(--spacing) * 60);
+  }
+  .mb-sm-23 {
+    margin-bottom: 17.5rem;
+  }
+  .mb-sm-24 {
+    margin-bottom: calc(var(--spacing) * 80);
+  }
+  .mb-sm-25 {
+    margin-bottom: 22.5rem;
+  }
+  .mb-sm-auto {
+    margin-bottom: auto;
+  }
+  .ms-sm-0 {
+    margin-left: calc(var(--spacing) * 0);
+  }
+  .ms-sm-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+  .ms-sm-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .ms-sm-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .ms-sm-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
+  .ms-sm-5 {
+    margin-left: calc(var(--spacing) * 5);
+  }
+  .ms-sm-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
+  .ms-sm-7 {
+    margin-left: calc(var(--spacing) * 7);
+  }
+  .ms-sm-8 {
+    margin-left: calc(var(--spacing) * 8);
+  }
+  .ms-sm-9 {
+    margin-left: calc(var(--spacing) * 9);
+  }
+  .ms-sm-10 {
+    margin-left: calc(var(--spacing) * 10);
+  }
+  .ms-sm-11 {
+    margin-left: calc(var(--spacing) * 12);
+  }
+  .ms-sm-12 {
+    margin-left: calc(var(--spacing) * 14);
+  }
+  .ms-sm-13 {
+    margin-left: calc(var(--spacing) * 16);
+  }
+  .ms-sm-14 {
+    margin-left: 4.5rem;
+  }
+  .ms-sm-15 {
+    margin-left: calc(var(--spacing) * 20);
+  }
+  .ms-sm-16 {
+    margin-left: calc(var(--spacing) * 24);
+  }
+  .ms-sm-17 {
+    margin-left: calc(var(--spacing) * 28);
+  }
+  .ms-sm-18 {
+    margin-left: calc(var(--spacing) * 32);
+  }
+  .ms-sm-19 {
+    margin-left: calc(var(--spacing) * 36);
+  }
+  .ms-sm-20 {
+    margin-left: calc(var(--spacing) * 40);
+  }
+  .ms-sm-21 {
+    margin-left: 12.5rem;
+  }
+  .ms-sm-22 {
+    margin-left: calc(var(--spacing) * 60);
+  }
+  .ms-sm-23 {
+    margin-left: 17.5rem;
+  }
+  .ms-sm-24 {
+    margin-left: calc(var(--spacing) * 80);
+  }
+  .ms-sm-25 {
+    margin-left: 22.5rem;
+  }
+  .ms-sm-auto {
+    margin-left: auto;
+  }
+  .m-sm-n1 {
+    margin-top: -0.25rem;
+    margin-right: -0.25rem;
+    margin-bottom: -0.25rem;
+    margin-left: -0.25rem;
+  }
+  .m-sm-n2 {
+    margin-top: -0.5rem;
+    margin-right: -0.5rem;
+    margin-bottom: -0.5rem;
+    margin-left: -0.5rem;
+  }
+  .m-sm-n3 {
+    margin-top: -0.75rem;
+    margin-right: -0.75rem;
+    margin-bottom: -0.75rem;
+    margin-left: -0.75rem;
+  }
+  .m-sm-n4 {
+    margin-top: -1rem;
+    margin-right: -1rem;
+    margin-bottom: -1rem;
+    margin-left: -1rem;
+  }
+  .m-sm-n5 {
+    margin-top: -1.25rem;
+    margin-right: -1.25rem;
+    margin-bottom: -1.25rem;
+    margin-left: -1.25rem;
+  }
+  .m-sm-n6 {
+    margin-top: -1.5rem;
+    margin-right: -1.5rem;
+    margin-bottom: -1.5rem;
+    margin-left: -1.5rem;
+  }
+  .m-sm-n7 {
+    margin-top: -1.75rem;
+    margin-right: -1.75rem;
+    margin-bottom: -1.75rem;
+    margin-left: -1.75rem;
+  }
+  .m-sm-n8 {
+    margin-top: -2rem;
+    margin-right: -2rem;
+    margin-bottom: -2rem;
+    margin-left: -2rem;
+  }
+  .m-sm-n9 {
+    margin-top: -2.25rem;
+    margin-right: -2.25rem;
+    margin-bottom: -2.25rem;
+    margin-left: -2.25rem;
+  }
+  .m-sm-n10 {
+    margin-top: -2.5rem;
+    margin-right: -2.5rem;
+    margin-bottom: -2.5rem;
+    margin-left: -2.5rem;
+  }
+  .m-sm-n11 {
+    margin-top: -3rem;
+    margin-right: -3rem;
+    margin-bottom: -3rem;
+    margin-left: -3rem;
+  }
+  .m-sm-n12 {
+    margin-top: -3.5rem;
+    margin-right: -3.5rem;
+    margin-bottom: -3.5rem;
+    margin-left: -3.5rem;
+  }
+  .m-sm-n13 {
+    margin-top: -4rem;
+    margin-right: -4rem;
+    margin-bottom: -4rem;
+    margin-left: -4rem;
+  }
+  .m-sm-n14 {
+    margin-top: -4.5rem;
+    margin-right: -4.5rem;
+    margin-bottom: -4.5rem;
+    margin-left: -4.5rem;
+  }
+  .m-sm-n15 {
+    margin-top: -5rem;
+    margin-right: -5rem;
+    margin-bottom: -5rem;
+    margin-left: -5rem;
+  }
+  .m-sm-n16 {
+    margin-top: -6rem;
+    margin-right: -6rem;
+    margin-bottom: -6rem;
+    margin-left: -6rem;
+  }
+  .m-sm-n17 {
+    margin-top: -7rem;
+    margin-right: -7rem;
+    margin-bottom: -7rem;
+    margin-left: -7rem;
+  }
+  .m-sm-n18 {
+    margin-top: -8rem;
+    margin-right: -8rem;
+    margin-bottom: -8rem;
+    margin-left: -8rem;
+  }
+  .m-sm-n19 {
+    margin-top: -9rem;
+    margin-right: -9rem;
+    margin-bottom: -9rem;
+    margin-left: -9rem;
+  }
+  .m-sm-n20 {
+    margin-top: -10rem;
+    margin-right: -10rem;
+    margin-bottom: -10rem;
+    margin-left: -10rem;
+  }
+  .m-sm-n21 {
+    margin-top: -12.5rem;
+    margin-right: -12.5rem;
+    margin-bottom: -12.5rem;
+    margin-left: -12.5rem;
+  }
+  .m-sm-n22 {
+    margin-top: -15rem;
+    margin-right: -15rem;
+    margin-bottom: -15rem;
+    margin-left: -15rem;
+  }
+  .m-sm-n23 {
+    margin-top: -17.5rem;
+    margin-right: -17.5rem;
+    margin-bottom: -17.5rem;
+    margin-left: -17.5rem;
+  }
+  .m-sm-n24 {
+    margin-top: -20rem;
+    margin-right: -20rem;
+    margin-bottom: -20rem;
+    margin-left: -20rem;
+  }
+  .m-sm-n25 {
+    margin-top: -22.5rem;
+    margin-right: -22.5rem;
+    margin-bottom: -22.5rem;
+    margin-left: -22.5rem;
+  }
+  .mx-sm-n1 {
+    margin-right: -0.25rem;
+    margin-left: -0.25rem;
+  }
+  .mx-sm-n2 {
+    @media (width >= 576px) {
+      margin-inline: -0.5rem;
+    }
+  }
+  .mx-sm-n3 {
+    margin-right: -0.75rem;
+    margin-left: -0.75rem;
+  }
+  .mx-sm-n4 {
+    margin-right: -1rem;
+    margin-left: -1rem;
+  }
+  .mx-sm-n5 {
+    margin-right: -1.25rem;
+    margin-left: -1.25rem;
+  }
+  .mx-sm-n6 {
+    margin-right: -1.5rem;
+    margin-left: -1.5rem;
+  }
+  .mx-sm-n7 {
+    margin-right: -1.75rem;
+    margin-left: -1.75rem;
+  }
+  .mx-sm-n8 {
+    margin-right: -2rem;
+    margin-left: -2rem;
+  }
+  .mx-sm-n9 {
+    margin-right: -2.25rem;
+    margin-left: -2.25rem;
+  }
+  .mx-sm-n10 {
+    margin-right: -2.5rem;
+    margin-left: -2.5rem;
+  }
+  .mx-sm-n11 {
+    margin-right: -3rem;
+    margin-left: -3rem;
+  }
+  .mx-sm-n12 {
+    margin-right: -3.5rem;
+    margin-left: -3.5rem;
+  }
+  .mx-sm-n13 {
+    margin-right: -4rem;
+    margin-left: -4rem;
+  }
+  .mx-sm-n14 {
+    margin-right: -4.5rem;
+    margin-left: -4.5rem;
+  }
+  .mx-sm-n15 {
+    margin-right: -5rem;
+    margin-left: -5rem;
+  }
+  .mx-sm-n16 {
+    margin-right: -6rem;
+    margin-left: -6rem;
+  }
+  .mx-sm-n17 {
+    margin-right: -7rem;
+    margin-left: -7rem;
+  }
+  .mx-sm-n18 {
+    margin-right: -8rem;
+    margin-left: -8rem;
+  }
+  .mx-sm-n19 {
+    margin-right: -9rem;
+    margin-left: -9rem;
+  }
+  .mx-sm-n20 {
+    margin-right: -10rem;
+    margin-left: -10rem;
+  }
+  .mx-sm-n21 {
+    margin-right: -12.5rem;
+    margin-left: -12.5rem;
+  }
+  .mx-sm-n22 {
+    margin-right: -15rem;
+    margin-left: -15rem;
+  }
+  .mx-sm-n23 {
+    margin-right: -17.5rem;
+    margin-left: -17.5rem;
+  }
+  .mx-sm-n24 {
+    margin-right: -20rem;
+    margin-left: -20rem;
+  }
+  .mx-sm-n25 {
+    margin-right: -22.5rem;
+    margin-left: -22.5rem;
+  }
+  .my-sm-n1 {
+    margin-top: -0.25rem;
+    margin-bottom: -0.25rem;
+  }
+  .my-sm-n2 {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+  .my-sm-n3 {
+    margin-top: -0.75rem;
+    margin-bottom: -0.75rem;
+  }
+  .my-sm-n4 {
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+  }
+  .my-sm-n5 {
+    margin-top: -1.25rem;
+    margin-bottom: -1.25rem;
+  }
+  .my-sm-n6 {
+    margin-top: -1.5rem;
+    margin-bottom: -1.5rem;
+  }
+  .my-sm-n7 {
+    margin-top: -1.75rem;
+    margin-bottom: -1.75rem;
+  }
+  .my-sm-n8 {
+    margin-top: -2rem;
+    margin-bottom: -2rem;
+  }
+  .my-sm-n9 {
+    margin-top: -2.25rem;
+    margin-bottom: -2.25rem;
+  }
+  .my-sm-n10 {
+    margin-top: -2.5rem;
+    margin-bottom: -2.5rem;
+  }
+  .my-sm-n11 {
+    margin-top: -3rem;
+    margin-bottom: -3rem;
+  }
+  .my-sm-n12 {
+    margin-top: -3.5rem;
+    margin-bottom: -3.5rem;
+  }
+  .my-sm-n13 {
+    margin-top: -4rem;
+    margin-bottom: -4rem;
+  }
+  .my-sm-n14 {
+    margin-top: -4.5rem;
+    margin-bottom: -4.5rem;
+  }
+  .my-sm-n15 {
+    margin-top: -5rem;
+    margin-bottom: -5rem;
+  }
+  .my-sm-n16 {
+    margin-top: -6rem;
+    margin-bottom: -6rem;
+  }
+  .my-sm-n17 {
+    margin-top: -7rem;
+    margin-bottom: -7rem;
+  }
+  .my-sm-n18 {
+    margin-top: -8rem;
+    margin-bottom: -8rem;
+  }
+  .my-sm-n19 {
+    margin-top: -9rem;
+    margin-bottom: -9rem;
+  }
+  .my-sm-n20 {
+    margin-top: -10rem;
+    margin-bottom: -10rem;
+  }
+  .my-sm-n21 {
+    margin-top: -12.5rem;
+    margin-bottom: -12.5rem;
+  }
+  .my-sm-n22 {
+    margin-top: -15rem;
+    margin-bottom: -15rem;
+  }
+  .my-sm-n23 {
+    margin-top: -17.5rem;
+    margin-bottom: -17.5rem;
+  }
+  .my-sm-n24 {
+    margin-top: -20rem;
+    margin-bottom: -20rem;
+  }
+  .my-sm-n25 {
+    margin-top: -22.5rem;
+    margin-bottom: -22.5rem;
+  }
+  .mt-sm-n1 {
+    margin-top: -0.25rem;
+  }
+  .mt-sm-n2 {
+    margin-top: -0.5rem;
+  }
+  .mt-sm-n3 {
+    margin-top: -0.75rem;
+  }
+  .mt-sm-n4 {
+    margin-top: -1rem;
+  }
+  .mt-sm-n5 {
+    margin-top: -1.25rem;
+  }
+  .mt-sm-n6 {
+    margin-top: -1.5rem;
+  }
+  .mt-sm-n7 {
+    margin-top: -1.75rem;
+  }
+  .mt-sm-n8 {
+    margin-top: -2rem;
+  }
+  .mt-sm-n9 {
+    margin-top: -2.25rem;
+  }
+  .mt-sm-n10 {
+    margin-top: -2.5rem;
+  }
+  .mt-sm-n11 {
+    margin-top: -3rem;
+  }
+  .mt-sm-n12 {
+    margin-top: -3.5rem;
+  }
+  .mt-sm-n13 {
+    margin-top: -4rem;
+  }
+  .mt-sm-n14 {
+    margin-top: -4.5rem;
+  }
+  .mt-sm-n15 {
+    margin-top: -5rem;
+  }
+  .mt-sm-n16 {
+    margin-top: -6rem;
+  }
+  .mt-sm-n17 {
+    margin-top: -7rem;
+  }
+  .mt-sm-n18 {
+    margin-top: -8rem;
+  }
+  .mt-sm-n19 {
+    margin-top: -9rem;
+  }
+  .mt-sm-n20 {
+    margin-top: -10rem;
+  }
+  .mt-sm-n21 {
+    margin-top: -12.5rem;
+  }
+  .mt-sm-n22 {
+    margin-top: -15rem;
+  }
+  .mt-sm-n23 {
+    margin-top: -17.5rem;
+  }
+  .mt-sm-n24 {
+    margin-top: -20rem;
+  }
+  .mt-sm-n25 {
+    margin-top: -22.5rem;
+  }
+  .me-sm-n1 {
+    margin-right: -0.25rem;
+  }
+  .me-sm-n2 {
+    margin-right: -0.5rem;
+  }
+  .me-sm-n3 {
+    margin-right: -0.75rem;
+  }
+  .me-sm-n4 {
+    margin-right: -1rem;
+  }
+  .me-sm-n5 {
+    margin-right: -1.25rem;
+  }
+  .me-sm-n6 {
+    margin-right: -1.5rem;
+  }
+  .me-sm-n7 {
+    margin-right: -1.75rem;
+  }
+  .me-sm-n8 {
+    margin-right: -2rem;
+  }
+  .me-sm-n9 {
+    margin-right: -2.25rem;
+  }
+  .me-sm-n10 {
+    margin-right: -2.5rem;
+  }
+  .me-sm-n11 {
+    margin-right: -3rem;
+  }
+  .me-sm-n12 {
+    margin-right: -3.5rem;
+  }
+  .me-sm-n13 {
+    margin-right: -4rem;
+  }
+  .me-sm-n14 {
+    margin-right: -4.5rem;
+  }
+  .me-sm-n15 {
+    margin-right: -5rem;
+  }
+  .me-sm-n16 {
+    margin-right: -6rem;
+  }
+  .me-sm-n17 {
+    margin-right: -7rem;
+  }
+  .me-sm-n18 {
+    margin-right: -8rem;
+  }
+  .me-sm-n19 {
+    margin-right: -9rem;
+  }
+  .me-sm-n20 {
+    margin-right: -10rem;
+  }
+  .me-sm-n21 {
+    margin-right: -12.5rem;
+  }
+  .me-sm-n22 {
+    margin-right: -15rem;
+  }
+  .me-sm-n23 {
+    margin-right: -17.5rem;
+  }
+  .me-sm-n24 {
+    margin-right: -20rem;
+  }
+  .me-sm-n25 {
+    margin-right: -22.5rem;
+  }
+  .mb-sm-n1 {
+    margin-bottom: -0.25rem;
+  }
+  .mb-sm-n2 {
+    margin-bottom: -0.5rem;
+  }
+  .mb-sm-n3 {
+    margin-bottom: -0.75rem;
+  }
+  .mb-sm-n4 {
+    margin-bottom: -1rem;
+  }
+  .mb-sm-n5 {
+    margin-bottom: -1.25rem;
+  }
+  .mb-sm-n6 {
+    margin-bottom: -1.5rem;
+  }
+  .mb-sm-n7 {
+    margin-bottom: -1.75rem;
+  }
+  .mb-sm-n8 {
+    margin-bottom: -2rem;
+  }
+  .mb-sm-n9 {
+    margin-bottom: -2.25rem;
+  }
+  .mb-sm-n10 {
+    margin-bottom: -2.5rem;
+  }
+  .mb-sm-n11 {
+    margin-bottom: -3rem;
+  }
+  .mb-sm-n12 {
+    margin-bottom: -3.5rem;
+  }
+  .mb-sm-n13 {
+    margin-bottom: -4rem;
+  }
+  .mb-sm-n14 {
+    margin-bottom: -4.5rem;
+  }
+  .mb-sm-n15 {
+    margin-bottom: -5rem;
+  }
+  .mb-sm-n16 {
+    margin-bottom: -6rem;
+  }
+  .mb-sm-n17 {
+    margin-bottom: -7rem;
+  }
+  .mb-sm-n18 {
+    margin-bottom: -8rem;
+  }
+  .mb-sm-n19 {
+    margin-bottom: -9rem;
+  }
+  .mb-sm-n20 {
+    margin-bottom: -10rem;
+  }
+  .mb-sm-n21 {
+    margin-bottom: -12.5rem;
+  }
+  .mb-sm-n22 {
+    margin-bottom: -15rem;
+  }
+  .mb-sm-n23 {
+    margin-bottom: -17.5rem;
+  }
+  .mb-sm-n24 {
+    margin-bottom: -20rem;
+  }
+  .mb-sm-n25 {
+    margin-bottom: -22.5rem;
+  }
+  .ms-sm-n1 {
+    margin-left: -0.25rem;
+  }
+  .ms-sm-n2 {
+    margin-left: -0.5rem;
+  }
+  .ms-sm-n3 {
+    margin-left: -0.75rem;
+  }
+  .ms-sm-n4 {
+    margin-left: -1rem;
+  }
+  .ms-sm-n5 {
+    margin-left: -1.25rem;
+  }
+  .ms-sm-n6 {
+    margin-left: -1.5rem;
+  }
+  .ms-sm-n7 {
+    margin-left: -1.75rem;
+  }
+  .ms-sm-n8 {
+    margin-left: -2rem;
+  }
+  .ms-sm-n9 {
+    margin-left: -2.25rem;
+  }
+  .ms-sm-n10 {
+    margin-left: -2.5rem;
+  }
+  .ms-sm-n11 {
+    margin-left: -3rem;
+  }
+  .ms-sm-n12 {
+    margin-left: -3.5rem;
+  }
+  .ms-sm-n13 {
+    margin-left: -4rem;
+  }
+  .ms-sm-n14 {
+    margin-left: -4.5rem;
+  }
+  .ms-sm-n15 {
+    margin-left: -5rem;
+  }
+  .ms-sm-n16 {
+    margin-left: -6rem;
+  }
+  .ms-sm-n17 {
+    margin-left: -7rem;
+  }
+  .ms-sm-n18 {
+    margin-left: -8rem;
+  }
+  .ms-sm-n19 {
+    margin-left: -9rem;
+  }
+  .ms-sm-n20 {
+    margin-left: -10rem;
+  }
+  .ms-sm-n21 {
+    margin-left: -12.5rem;
+  }
+  .ms-sm-n22 {
+    margin-left: -15rem;
+  }
+  .ms-sm-n23 {
+    margin-left: -17.5rem;
+  }
+  .ms-sm-n24 {
+    margin-left: -20rem;
+  }
+  .ms-sm-n25 {
+    margin-left: -22.5rem;
+  }
+  .p-sm-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+  .p-sm-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+  .p-sm-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-sm-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+  .p-sm-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .p-sm-5 {
+    padding: calc(var(--spacing) * 5);
+  }
+  .p-sm-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+  .p-sm-7 {
+    padding: calc(var(--spacing) * 7);
+  }
+  .p-sm-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+  .p-sm-9 {
+    padding: calc(var(--spacing) * 9);
+  }
+  .p-sm-10 {
+    padding: calc(var(--spacing) * 10);
+  }
+  .p-sm-11 {
+    padding: calc(var(--spacing) * 12);
+  }
+  .p-sm-12 {
+    padding: calc(var(--spacing) * 14);
+  }
+  .p-sm-13 {
+    padding: calc(var(--spacing) * 16);
+  }
+  .p-sm-14 {
+    padding: 4.5rem;
+  }
+  .p-sm-15 {
+    padding: calc(var(--spacing) * 20);
+  }
+  .p-sm-16 {
+    padding: calc(var(--spacing) * 24);
+  }
+  .p-sm-17 {
+    padding: calc(var(--spacing) * 28);
+  }
+  .p-sm-18 {
+    padding: calc(var(--spacing) * 32);
+  }
+  .p-sm-19 {
+    padding: calc(var(--spacing) * 36);
+  }
+  .p-sm-20 {
+    padding: calc(var(--spacing) * 40);
+  }
+  .p-sm-21 {
+    padding: 12.5rem;
+  }
+  .p-sm-22 {
+    padding: calc(var(--spacing) * 60);
+  }
+  .p-sm-23 {
+    padding: 17.5rem;
+  }
+  .p-sm-24 {
+    padding: calc(var(--spacing) * 80);
+  }
+  .p-sm-25 {
+    padding: 22.5rem;
+  }
+  .px-sm-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .px-sm-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-sm-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-sm-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-sm-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-sm-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+  .px-sm-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .px-sm-7 {
+    padding-inline: calc(var(--spacing) * 7);
+  }
+  .px-sm-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+  .px-sm-9 {
+    padding-inline: calc(var(--spacing) * 9);
+  }
+  .px-sm-10 {
+    padding-inline: calc(var(--spacing) * 10);
+  }
+  .px-sm-11 {
+    padding-inline: calc(var(--spacing) * 12);
+  }
+  .px-sm-12 {
+    padding-inline: calc(var(--spacing) * 14);
+  }
+  .px-sm-13 {
+    padding-inline: calc(var(--spacing) * 16);
+  }
+  .px-sm-14 {
+    padding-inline: 4.5rem;
+  }
+  .px-sm-15 {
+    padding-inline: calc(var(--spacing) * 20);
+  }
+  .px-sm-16 {
+    padding-inline: calc(var(--spacing) * 24);
+  }
+  .px-sm-17 {
+    padding-inline: calc(var(--spacing) * 28);
+  }
+  .px-sm-18 {
+    padding-inline: calc(var(--spacing) * 32);
+  }
+  .px-sm-19 {
+    padding-inline: calc(var(--spacing) * 36);
+  }
+  .px-sm-20 {
+    padding-inline: calc(var(--spacing) * 40);
+  }
+  .px-sm-21 {
+    padding-inline: 12.5rem;
+  }
+  .px-sm-22 {
+    padding-inline: calc(var(--spacing) * 60);
+  }
+  .px-sm-23 {
+    padding-inline: 17.5rem;
+  }
+  .px-sm-24 {
+    padding-inline: calc(var(--spacing) * 80);
+  }
+  .px-sm-25 {
+    padding-inline: 22.5rem;
+  }
+  .py-sm-0 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .py-sm-1 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 1) !important;
+    }
+  }
+  .py-sm-2 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .py-sm-3 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .py-sm-4 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 4) !important;
+    }
+  }
+  .py-sm-5 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 5) !important;
+    }
+  }
+  .py-sm-6 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 6) !important;
+    }
+  }
+  .py-sm-7 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 7) !important;
+    }
+  }
+  .py-sm-8 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .py-sm-9 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 9) !important;
+    }
+  }
+  .py-sm-10 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .py-sm-11 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 12) !important;
+    }
+  }
+  .py-sm-12 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 14) !important;
+    }
+  }
+  .py-sm-13 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 16) !important;
+    }
+  }
+  .py-sm-14 {
+    @media (width >= 576px) {
+      padding-block: 4.5rem !important;
+    }
+  }
+  .py-sm-15 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 20) !important;
+    }
+  }
+  .py-sm-16 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 24) !important;
+    }
+  }
+  .py-sm-17 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 28) !important;
+    }
+  }
+  .py-sm-18 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 32) !important;
+    }
+  }
+  .py-sm-19 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 36) !important;
+    }
+  }
+  .py-sm-20 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 40) !important;
+    }
+  }
+  .py-sm-21 {
+    @media (width >= 576px) {
+      padding-block: 12.5rem !important;
+    }
+  }
+  .py-sm-22 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 60) !important;
+    }
+  }
+  .py-sm-23 {
+    @media (width >= 576px) {
+      padding-block: 17.5rem !important;
+    }
+  }
+  .py-sm-24 {
+    @media (width >= 576px) {
+      padding-block: calc(var(--spacing) * 80) !important;
+    }
+  }
+  .py-sm-25 {
+    @media (width >= 576px) {
+      padding-block: 22.5rem !important;
+    }
+  }
+  .pt-sm-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .pt-sm-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
+  .pt-sm-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+  .pt-sm-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
+  .pt-sm-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+  .pt-sm-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
+  .pt-sm-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+  .pt-sm-7 {
+    padding-top: calc(var(--spacing) * 7);
+  }
+  .pt-sm-8 {
+    padding-top: calc(var(--spacing) * 8);
+  }
+  .pt-sm-9 {
+    padding-top: calc(var(--spacing) * 9);
+  }
+  .pt-sm-10 {
+    padding-top: calc(var(--spacing) * 10);
+  }
+  .pt-sm-11 {
+    padding-top: calc(var(--spacing) * 12);
+  }
+  .pt-sm-12 {
+    padding-top: calc(var(--spacing) * 14);
+  }
+  .pt-sm-13 {
+    padding-top: calc(var(--spacing) * 16);
+  }
+  .pt-sm-14 {
+    padding-top: 4.5rem;
+  }
+  .pt-sm-15 {
+    padding-top: calc(var(--spacing) * 20);
+  }
+  .pt-sm-16 {
+    padding-top: calc(var(--spacing) * 24);
+  }
+  .pt-sm-17 {
+    padding-top: calc(var(--spacing) * 28);
+  }
+  .pt-sm-18 {
+    padding-top: calc(var(--spacing) * 32);
+  }
+  .pt-sm-19 {
+    padding-top: calc(var(--spacing) * 36);
+  }
+  .pt-sm-20 {
+    padding-top: calc(var(--spacing) * 40);
+  }
+  .pt-sm-21 {
+    padding-top: 12.5rem;
+  }
+  .pt-sm-22 {
+    padding-top: calc(var(--spacing) * 60);
+  }
+  .pt-sm-23 {
+    padding-top: 17.5rem;
+  }
+  .pt-sm-24 {
+    padding-top: calc(var(--spacing) * 80);
+  }
+  .pt-sm-25 {
+    padding-top: 22.5rem;
+  }
+  .pe-sm-0 {
+    padding-right: calc(var(--spacing) * 0);
+  }
+  .pe-sm-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
+  .pe-sm-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
+  .pe-sm-3 {
+    padding-right: .75rem;
+  }
+  .pe-sm-4 {
+    padding-right: calc(var(--spacing) * 4);
+  }
+  .pe-sm-5 {
+    padding-right: calc(var(--spacing) * 5);
+  }
+  .pe-sm-6 {
+    padding-right: calc(var(--spacing) * 6);
+  }
+  .pe-sm-7 {
+    padding-right: calc(var(--spacing) * 7);
+  }
+  .pe-sm-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
+  .pe-sm-9 {
+    padding-right: calc(var(--spacing) * 9);
+  }
+  .pe-sm-10 {
+    padding-right: calc(var(--spacing) * 10);
+  }
+  .pe-sm-11 {
+    padding-right: calc(var(--spacing) * 12);
+  }
+  .pe-sm-12 {
+    padding-right: calc(var(--spacing) * 14);
+  }
+  .pe-sm-13 {
+    padding-right: calc(var(--spacing) * 16);
+  }
+  .pe-sm-14 {
+    padding-right: 4.5rem;
+  }
+  .pe-sm-15 {
+    padding-right: calc(var(--spacing) * 20);
+  }
+  .pe-sm-16 {
+    padding-right: calc(var(--spacing) * 24);
+  }
+  .pe-sm-17 {
+    padding-right: calc(var(--spacing) * 28);
+  }
+  .pe-sm-18 {
+    padding-right: calc(var(--spacing) * 32);
+  }
+  .pe-sm-19 {
+    padding-right: calc(var(--spacing) * 36);
+  }
+  .pe-sm-20 {
+    padding-right: calc(var(--spacing) * 40);
+  }
+  .pe-sm-21 {
+    padding-right: 12.5rem;
+  }
+  .pe-sm-22 {
+    padding-right: calc(var(--spacing) * 60);
+  }
+  .pe-sm-23 {
+    padding-right: 17.5rem;
+  }
+  .pe-sm-24 {
+    padding-right: calc(var(--spacing) * 80);
+  }
+  .pe-sm-25 {
+    padding-right: 22.5rem;
+  }
+  .pb-sm-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
+  .pb-sm-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
+  .pb-sm-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+  .pb-sm-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+  .pb-sm-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+  .pb-sm-5 {
+    padding-bottom: calc(var(--spacing) * 5);
+  }
+  .pb-sm-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+  .pb-sm-7 {
+    padding-bottom: calc(var(--spacing) * 7);
+  }
+  .pb-sm-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
+  .pb-sm-9 {
+    padding-bottom: calc(var(--spacing) * 9);
+  }
+  .pb-sm-10 {
+    padding-bottom: calc(var(--spacing) * 10);
+  }
+  .pb-sm-11 {
+    padding-bottom: calc(var(--spacing) * 12);
+  }
+  .pb-sm-12 {
+    padding-bottom: calc(var(--spacing) * 14);
+  }
+  .pb-sm-13 {
+    padding-bottom: calc(var(--spacing) * 16);
+  }
+  .pb-sm-14 {
+    padding-bottom: 4.5rem;
+  }
+  .pb-sm-15 {
+    padding-bottom: calc(var(--spacing) * 20);
+  }
+  .pb-sm-16 {
+    padding-bottom: calc(var(--spacing) * 24);
+  }
+  .pb-sm-17 {
+    padding-bottom: calc(var(--spacing) * 28);
+  }
+  .pb-sm-18 {
+    padding-bottom: calc(var(--spacing) * 32);
+  }
+  .pb-sm-19 {
+    padding-bottom: calc(var(--spacing) * 36);
+  }
+  .pb-sm-20 {
+    padding-bottom: calc(var(--spacing) * 40);
+  }
+  .pb-sm-21 {
+    padding-bottom: 12.5rem;
+  }
+  .pb-sm-22 {
+    padding-bottom: calc(var(--spacing) * 60);
+  }
+  .pb-sm-23 {
+    padding-bottom: 17.5rem;
+  }
+  .pb-sm-24 {
+    padding-bottom: calc(var(--spacing) * 80);
+  }
+  .pb-sm-25 {
+    padding-bottom: 22.5rem;
+  }
+  .ps-sm-0 {
+    padding-left: calc(var(--spacing) * 0);
+  }
+  .ps-sm-1 {
+    padding-left: calc(var(--spacing) * 1);
+  }
+  .ps-sm-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .ps-sm-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .ps-sm-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+  .ps-sm-5 {
+    padding-left: calc(var(--spacing) * 5);
+  }
+  .ps-sm-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
+  .ps-sm-7 {
+    padding-left: 1.75rem;
+  }
+  .ps-sm-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
+  .ps-sm-9 {
+    padding-left: calc(var(--spacing) * 9);
+  }
+  .ps-sm-10 {
+    padding-left: calc(var(--spacing) * 10);
+  }
+  .ps-sm-11 {
+    padding-left: calc(var(--spacing) * 12);
+  }
+  .ps-sm-12 {
+    padding-left: calc(var(--spacing) * 14);
+  }
+  .ps-sm-13 {
+    padding-left: calc(var(--spacing) * 16);
+  }
+  .ps-sm-14 {
+    padding-left: 4.5rem;
+  }
+  .ps-sm-15 {
+    padding-left: calc(var(--spacing) * 20);
+  }
+  .ps-sm-16 {
+    padding-left: calc(var(--spacing) * 24);
+  }
+  .ps-sm-17 {
+    padding-left: calc(var(--spacing) * 28);
+  }
+  .ps-sm-18 {
+    padding-left: calc(var(--spacing) * 32);
+  }
+  .ps-sm-19 {
+    padding-left: calc(var(--spacing) * 36);
+  }
+  .ps-sm-20 {
+    padding-left: calc(var(--spacing) * 40);
+  }
+  .ps-sm-21 {
+    padding-left: 12.5rem;
+  }
+  .ps-sm-22 {
+    padding-left: calc(var(--spacing) * 60);
+  }
+  .ps-sm-23 {
+    padding-left: 17.5rem;
+  }
+  .ps-sm-24 {
+    padding-left: calc(var(--spacing) * 80);
+  }
+  .ps-sm-25 {
+    padding-left: 22.5rem;
+  }
+  .gap-sm-0 {
+    gap: calc(var(--spacing) * 0);
+  }
+  .gap-sm-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-sm-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-sm-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-sm-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .gap-sm-5 {
+    gap: calc(var(--spacing) * 5);
+  }
+  .gap-sm-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .gap-sm-7 {
+    gap: calc(var(--spacing) * 7);
+  }
+  .gap-sm-8 {
+    gap: calc(var(--spacing) * 8);
+  }
+  .gap-sm-9 {
+    gap: calc(var(--spacing) * 9);
+  }
+  .gap-sm-10 {
+    gap: calc(var(--spacing) * 10);
+  }
+  .gap-sm-11 {
+    gap: calc(var(--spacing) * 12);
+  }
+  .gap-sm-12 {
+    gap: calc(var(--spacing) * 14);
+  }
+  .gap-sm-13 {
+    gap: calc(var(--spacing) * 16);
+  }
+  .gap-sm-14 {
+    gap: 4.5rem;
+  }
+  .gap-sm-15 {
+    gap: calc(var(--spacing) * 20);
+  }
+  .gap-sm-16 {
+    gap: calc(var(--spacing) * 24);
+  }
+  .gap-sm-17 {
+    gap: calc(var(--spacing) * 28);
+  }
+  .gap-sm-18 {
+    gap: calc(var(--spacing) * 32);
+  }
+  .gap-sm-19 {
+    gap: calc(var(--spacing) * 36);
+  }
+  .gap-sm-20 {
+    gap: calc(var(--spacing) * 40);
+  }
+  .gap-sm-21 {
+    gap: 12.5rem;
+  }
+  .gap-sm-22 {
+    gap: calc(var(--spacing) * 60);
+  }
+  .gap-sm-23 {
+    gap: 17.5rem;
+  }
+  .gap-sm-24 {
+    gap: calc(var(--spacing) * 80);
+  }
+  .gap-sm-25 {
+    gap: 22.5rem;
+  }
+  .row-gap-sm-0 {
+    row-gap: calc(var(--spacing) * 0);
+  }
+  .row-gap-sm-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
+  .row-gap-sm-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
+  .row-gap-sm-3 {
+    row-gap: calc(var(--spacing) * 3);
+  }
+  .row-gap-sm-4 {
+    row-gap: calc(var(--spacing) * 4);
+  }
+  .row-gap-sm-5 {
+    row-gap: calc(var(--spacing) * 5);
+  }
+  .row-gap-sm-6 {
+    row-gap: calc(var(--spacing) * 6);
+  }
+  .row-gap-sm-7 {
+    row-gap: calc(var(--spacing) * 7);
+  }
+  .row-gap-sm-8 {
+    row-gap: calc(var(--spacing) * 8);
+  }
+  .row-gap-sm-9 {
+    row-gap: calc(var(--spacing) * 9);
+  }
+  .row-gap-sm-10 {
+    row-gap: calc(var(--spacing) * 10);
+  }
+  .row-gap-sm-11 {
+    row-gap: calc(var(--spacing) * 12);
+  }
+  .row-gap-sm-12 {
+    row-gap: calc(var(--spacing) * 14);
+  }
+  .row-gap-sm-13 {
+    row-gap: calc(var(--spacing) * 16);
+  }
+  .row-gap-sm-14 {
+    row-gap: 4.5rem;
+  }
+  .row-gap-sm-15 {
+    row-gap: calc(var(--spacing) * 20);
+  }
+  .row-gap-sm-16 {
+    row-gap: calc(var(--spacing) * 24);
+  }
+  .row-gap-sm-17 {
+    row-gap: calc(var(--spacing) * 28);
+  }
+  .row-gap-sm-18 {
+    row-gap: calc(var(--spacing) * 32);
+  }
+  .row-gap-sm-19 {
+    row-gap: calc(var(--spacing) * 36);
+  }
+  .row-gap-sm-20 {
+    row-gap: calc(var(--spacing) * 40);
+  }
+  .row-gap-sm-21 {
+    row-gap: 12.5rem;
+  }
+  .row-gap-sm-22 {
+    row-gap: calc(var(--spacing) * 60);
+  }
+  .row-gap-sm-23 {
+    row-gap: 17.5rem;
+  }
+  .row-gap-sm-24 {
+    row-gap: calc(var(--spacing) * 80);
+  }
+  .row-gap-sm-25 {
+    row-gap: 22.5rem;
+  }
+  .column-gap-sm-0 {
+    column-gap: calc(var(--spacing) * 0);
+    -moz-column-gap: 0 !important;
+  }
+  .column-gap-sm-1 {
+    column-gap: calc(var(--spacing) * 1);
+    -moz-column-gap: .25rem !important;
+  }
+  .column-gap-sm-2 {
+    column-gap: calc(var(--spacing) * 2);
+    -moz-column-gap: .5rem !important;
+  }
+  .column-gap-sm-3 {
+    column-gap: calc(var(--spacing) * 3);
+    -moz-column-gap: .75rem !important;
+  }
+  .column-gap-sm-4 {
+    column-gap: calc(var(--spacing) * 4);
+    -moz-column-gap: 1rem !important;
+  }
+  .column-gap-sm-5 {
+    column-gap: calc(var(--spacing) * 5);
+    -moz-column-gap: 1.25rem !important;
+  }
+  .column-gap-sm-6 {
+    column-gap: calc(var(--spacing) * 6);
+    -moz-column-gap: 1.5rem !important;
+  }
+  .column-gap-sm-7 {
+    column-gap: calc(var(--spacing) * 7);
+    -moz-column-gap: 1.75rem !important;
+  }
+  .column-gap-sm-8 {
+    column-gap: calc(var(--spacing) * 8);
+    -moz-column-gap: 2rem !important;
+  }
+  .column-gap-sm-9 {
+    column-gap: calc(var(--spacing) * 9);
+    -moz-column-gap: 2.25rem !important;
+  }
+  .column-gap-sm-10 {
+    column-gap: calc(var(--spacing) * 10);
+    -moz-column-gap: 2.5rem !important;
+  }
+  .column-gap-sm-11 {
+    column-gap: calc(var(--spacing) * 12);
+    -moz-column-gap: 3rem !important;
+  }
+  .column-gap-sm-12 {
+    column-gap: calc(var(--spacing) * 14);
+    -moz-column-gap: 3.5rem !important;
+  }
+  .column-gap-sm-13 {
+    column-gap: calc(var(--spacing) * 16);
+    -moz-column-gap: 4rem !important;
+  }
+  .column-gap-sm-14 {
+    column-gap: 4.5rem;
+    -moz-column-gap: 4.5rem !important;
+  }
+  .column-gap-sm-15 {
+    column-gap: calc(var(--spacing) * 20);
+    -moz-column-gap: 5rem !important;
+  }
+  .column-gap-sm-16 {
+    column-gap: calc(var(--spacing) * 24);
+    -moz-column-gap: 6rem !important;
+  }
+  .column-gap-sm-17 {
+    column-gap: calc(var(--spacing) * 28);
+    -moz-column-gap: 7rem !important;
+  }
+  .column-gap-sm-18 {
+    column-gap: calc(var(--spacing) * 32);
+    -moz-column-gap: 8rem !important;
+  }
+  .column-gap-sm-19 {
+    column-gap: calc(var(--spacing) * 36);
+    -moz-column-gap: 9rem !important;
+  }
+  .column-gap-sm-20 {
+    column-gap: calc(var(--spacing) * 40);
+    -moz-column-gap: 10rem !important;
+  }
+  .column-gap-sm-21 {
+    column-gap: 12.5rem;
+    -moz-column-gap: 12.5rem !important;
+  }
+  .column-gap-sm-22 {
+    column-gap: calc(var(--spacing) * 60);
+    -moz-column-gap: 15rem !important;
+  }
+  .column-gap-sm-23 {
+    column-gap: 17.5rem;
+    -moz-column-gap: 17.5rem !important;
+  }
+  .column-gap-sm-24 {
+    column-gap: calc(var(--spacing) * 80);
+    -moz-column-gap: 20rem !important;
+  }
+  .column-gap-sm-25 {
+    column-gap: 22.5rem;
+    -moz-column-gap: 22.5rem !important;
+  }
+  .text-sm-start {
+    text-align: left;
+  }
+  .text-sm-end {
+    text-align: right;
+  }
+  .text-sm-center {
+    text-align: center;
+  }
+  .navbar-expand-sm.navbar-light .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+    color: #3f78e0;
+  }
+  .navbar-expand-sm .dropdown-mega,.navbar-expand-sm .navbar-nav {
+    position: static;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu.dropdown-lg {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: 1.6rem;
+    padding-bottom: 1.3rem;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu.dropdown-lg .dropdown-lg-content {
+    display: flex;
+    flex-direction: row;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu.dropdown-lg .dropdown-header {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu:before {
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    z-index: -1;
+    display: block;
+    height: 100%;
+    width: 100%;
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu .dropdown-toggle:after {
+    position: absolute;
+    top: 0.15rem;
+    right: calc(var(--spacing) * 4);
+    margin-right: calc(var(--spacing) * 0);
+    font-size: 0.85rem;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu.mega-menu {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .navbar-expand-sm:not(.hover-none) .navbar-nav .dropdown-menu {
+    pointer-events: none;
+    visibility: hidden;
+    top: 120%;
+    display: block;
+    opacity: 0%;
+  }
+  .navbar-expand-sm:not(.hover-none) .navbar-nav .dropdown:not(.dropdown-submenu):hover>.dropdown-menu {
+    visibility: visible;
+    top: 100%;
+    opacity: 100%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.25s;
+    transition-duration: 0.25s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    pointer-events: all;
+  }
+  .navbar-expand-sm:not(.hover-none) .navbar-nav .dropdown-submenu {
+    position: relative;
+  }
+  .navbar-expand-sm:not(.hover-none) .navbar-nav .dropdown-submenu .dropdown-menu {
+    top: 30%;
+  }
+  .navbar-expand-sm:not(.hover-none) .navbar-nav .dropdown-submenu.dropstart:before {
+    position: absolute;
+    left: -1rem;
+    z-index: -1;
+    display: block;
+    height: 100%;
+    width: 100%;
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .navbar-expand-sm:not(.hover-none) .navbar-nav .dropdown-submenu:hover>.dropdown-menu {
+    visibility: visible;
+    top: calc(var(--spacing) * 0);
+    opacity: 100%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.25s;
+    transition-duration: 0.25s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    pointer-events: all;
+  }
+  .navbar-expand-sm .dropend>.dropdown-menu {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-sm .dropstart>.dropdown-menu {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-sm .offcanvas-nav {
+    flex-direction: row;
+    position: unset;
+  }
+  .navbar-expand-sm .offcanvas-nav.offcanvas-end,.navbar-expand-sm .offcanvas-nav.offcanvas-start {
+    width: 100%;
+  }
+  .navbar-expand-sm.extended.navbar-bg-light:not(.fixed),.navbar-expand-sm.fancy.navbar-bg-light:not(.fixed) {
+    background-color: inherit;
+  }
+  .navbar-expand-sm.extended:not(.fixed) .navbar-collapse .nav-link {
+    padding-block: 1.15rem;
+  }
+  .navbar-expand-sm.fancy:not(.fixed) .navbar-collapse .nav-link {
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .navbar-expand-sm[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
+    padding-block: 1.7rem;
+  }
+  .navbar-expand-sm.extended .navbar-collapse-wrapper,.navbar-expand-sm.fancy .navbar-collapse-wrapper {
+    width: 100%;
+    border-radius: 0.4rem;
+    --tw-shadow: 0 0.25rem 0.75rem var(--tw-shadow-color, rgba(30,34,40,0.02));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .navbar-expand-sm.extended:not(.extended-alt):not(.fixed) .navbar-collapse-wrapper {
+    padding-block: calc(var(--spacing) * 0);
+    padding-right: calc(var(--spacing) * 6);
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-sm.extended.extended-alt:not(.fixed) .navbar-collapse-wrapper {
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-sm.fancy:not(.fixed) .navbar-collapse-wrapper {
+    margin-top: calc(var(--spacing) * 9);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-sm.extended:not(.extended-alt) .navbar-brand {
+    padding-block: calc(var(--spacing) * 6);
+  }
+  .navbar-expand-sm.extended.extended-alt .navbar-brand {
+    padding-block: calc(var(--spacing) * 7);
+  }
+  .navbar-expand-sm.fixed .topbar {
+    display: none;
+  }
+  .navbar-expand-sm.navbar-dark:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand-sm.navbar-light:not(.transparent) .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu,.navbar-expand-sm.transparent.fixed .navbar-nav .dropdown:not(.dropdown-submenu):not(.language-select)>.dropdown-menu {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .navbar-expand-sm .navbar-collapse .nav-link {
+    white-space: nowrap;
+  }
+  .navbar-expand-sm .navbar-collapse .nav-item.parent-link {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .navbar-expand-sm .navbar-collapse .nav-item.parent-link>.nav-link:first-child {
+    padding-right: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-sm .navbar-collapse .nav-item.parent-link .dropdown-toggle {
+    padding-left: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-sm .dropdown-lg-content>div+div,.navbar-expand-sm .mega-menu-content>.row>[class*=col-]+[class*=col-] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-left-color: rgba(164,174,198,0.2);
+  }
+  .navbar-expand-sm .mega-menu-content {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: 0.6rem;
+    padding-bottom: 0.2rem;
+  }
+  .navbar-expand-sm .mega-menu-dark {
+    background-color: #2e353e;
+  }
+  .navbar-expand-sm .mega-menu-dark .img-svg {
+    background-color: rgba(255,255,255,.05);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .navbar-expand-sm .mega-menu-dark .img-svg:hover {
+    background-color: rgba(255,255,255,.09);
+  }
+  .navbar-expand-sm .mega-menu-dark .dropdown-item {
+    color: var(--color-white);
+  }
+  .navbar-expand-sm .mega-menu-dark .dropdown-item:focus,.navbar-expand-sm .mega-menu-dark .dropdown-item:hover {
+    color: var(--color-white);
+  }
+  .navbar-expand-sm .mega-menu-img {
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-sm .mega-menu-img .mega-menu-content {
+    margin-inline: calc(var(--spacing) * 0);
+    margin-block: 1.8rem;
+    padding-inline: calc(var(--spacing) * 8);
+    padding-block: 0.2rem;
+  }
+  .navbar-expand-sm .mega-menu-img .dropdown-item {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-sm.caret-none .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
+    display: none;
+  }
+  .progress-wrap.active-progress {
+    opacity: 100%;
+  }
+  .modal.fade.modal-bottom-center .modal-dialog {
+    margin-inline: auto;
+    margin-block: calc(var(--spacing) * 7);
+  }
+  .navbar-expand-sm {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-sm .navbar-nav .nav-link {
+    padding-inline: 1rem;
+  }
+  .navbar-expand-sm .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-sm .navbar-collapse {
+    display: flex;
+    flex-basis: auto;
+  }
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-sm .offcanvas {
+    visibility: visible;
+    position: static;
+    z-index: auto;
+    height: auto;
+    width: auto;
+    flex-grow: 1;
+    transform: none !important;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: none;
+  }
+  .navbar-expand-sm .offcanvas .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-sm .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    overflow-y: visible;
+    padding: calc(var(--spacing) * 0);
+  }
+}
+@media screen and (min-width:576px) {
+  .mb-sm-n50p {
+    --tw-translate-y: calc(2/4 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .mt-sm-n50p {
+    --tw-translate-y: calc(calc(2/4 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+}
+@media (max-width:575.98px) {
+  .navbar-expand-sm .offcanvas-nav {
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .navbar-expand-sm .offcanvas-nav .offcanvas-body, .navbar-expand-sm .offcanvas-nav .offcanvas-footer, .navbar-expand-sm .offcanvas-nav .offcanvas-header {
+    width: 100%;
+  }
+  .navbar-expand-sm .offcanvas-nav .offcanvas-body {
+    flex-grow: 0;
+    overflow-y: unset;
+  }
+  .navbar-expand-sm .navbar-collapse .dropdown-menu {
+    margin-top: calc(var(--spacing) * 0);
+    background-color: inherit;
+    padding: calc(var(--spacing) * 0);
+  }
+  .navbar-expand-sm .navbar-collapse .dropdown-menu .dropdown-item {
+    padding-block: 0.3rem;
+    padding-left: calc(var(--spacing) * 4);
+    color: var(--color-white);
+  }
+  .navbar-expand-sm .navbar-collapse .nav-link, .navbar-expand-sm .navbar-collapse .nav-link.active, .navbar-expand-sm .navbar-collapse .nav-link:focus, .navbar-expand-sm .navbar-collapse .nav-link:hover, .navbar-expand-sm .navbar-collapse .show>.nav-link {
+    color: var(--color-white);
+  }
+  .navbar-expand-sm .navbar-collapse .nav-link {
+    padding-block: 0.3rem;
+  }
+  .navbar-expand-sm .navbar-collapse .dropdown-toggle:after {
+    position: absolute;
+    top: 0.35rem;
+    right: -0.25rem;
+    margin-right: calc(var(--spacing) * 0);
+    font-size: 0.9rem;
+  }
+  .navbar-expand-sm .navbar-collapse .dropdown-submenu .dropdown-toggle:after {
+    top: 0.3rem;
+  }
+  .navbar-expand-sm .dropdown-header {
+    margin-top: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .navbar-expand-sm .dropend .dropdown-toggle:after, .navbar-expand-sm .dropstart .dropdown-toggle:after {
+    --tw-content: "\e92d";
+    content: var(--tw-content);
+  }
+  .navbar-expand-sm .dropstart .dropdown-menu[data-bs-popper] {
+    margin-right: calc(var(--spacing) * 0);
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .navbar-expand-sm .dropdown-toggle:after {
+    top: calc(var(--spacing) * 1);
+  }
+  .navbar-expand-sm .language-select .dropdown-toggle:after {
+    vertical-align: 0 !important;
+  }
+  .navbar-expand-sm .navbar-other .nav-item.language-select .nav-link {
+    font-size: 1.05rem;
+  }
+  .navbar-expand-sm .navbar-other .nav-item .nav-link>i {
+    font-size: calc(1.255rem + 0.06vw);
+  }
+  .navbar-expand-sm .navbar-brand {
+    padding-block: 1.2rem;
+  }
+  .navbar-expand-sm.fancy .navbar-collapse-wrapper {
+    background-color: inherit !important;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .navbar-expand-sm.center-logo.fixed .offcanvas-header .logo-light {
+    display: inline-block;
+  }
+  .navbar-expand-sm.center-logo.fixed .offcanvas-header .logo-dark {
+    display: none;
+  }
+  .navbar-expand-sm .nav-item.parent-link .dropdown-toggle {
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .shape {
+    display: none;
+  }
+  .bg-xs-none {
+    background-image: none;
+  }
+  .table-responsive-sm {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+@media (min-width:992px) and (max-width:1199.98px) {
+  .mega-menu-scroll {
+    height: 21.8rem;
+  }
+  .navbar .navbar-collapse .nav-link {
+    padding-inline: 0.6rem;
+  }
+  .projects-overflow .project-details {
+    max-width: var(--container-xs);
+  }
+}
+@media (prefers-reduced-motion:reduce) {
+  .form-floating>label {
+    transition-property: none;
+  }
+}
+@media print {
+  .d-print-inline {
+    display: inline;
+  }
+  .d-print-inline-block {
+    display: inline-block;
+  }
+  .d-print-block {
+    display: block;
+  }
+  .d-print-grid {
+    display: grid;
+  }
+  .d-print-inline-grid {
+    display: inline-grid;
+  }
+  .d-print-table {
+    display: table;
+  }
+  .d-print-table-row {
+    display: table-row;
+  }
+  .d-print-table-cell {
+    display: table-cell;
+  }
+  .d-print-flex {
+    display: flex;
+  }
+  .d-print-inline-flex {
+    display: inline-flex;
+  }
+  .d-print-none {
+    display: none;
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateX(0);
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateY(0);
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateZ(0);
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewX(0);
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewY(0);
+}
+@property --tw-pan-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pan-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pinch-zoom {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-scroll-snap-strictness {
+  syntax: "*";
+  inherits: false;
+  initial-value: proximity;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-divide-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contain-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contain-layout {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contain-paint {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contain-style {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
diff --git a/public/html/404.html b/public/html/404.html
new file mode 100644
index 0000000..4c0fe14
--- /dev/null
+++ b/public/html/404.html
@@ -0,0 +1,670 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/404 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:26 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper !bg-[#ffffff] ">
+      <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item dropdown language-select uppercase group">
+                <a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
+                <ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
+                </ul>
+              </li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+    </header>
+    <!-- /header -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container pt-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="lg:w-9/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <figure class="!mb-10"><img class="max-w-full h-auto" src="assets/img/illustrations/404.png" alt="image"></figure>
+          </div>
+          <!-- /column -->
+          <div class="lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
+            <h1 class="!mb-3">Oops! Page Not Found.</h1>
+            <p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-7 md:!px-14 lg:!px-5 xl:!px-7">The page you are looking for is not available or has been moved. Try a different page or go to homepage with the button below.</p>
+            <a class='btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='index.html'>Go to Homepage</a>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <!-- progress wrapper -->
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/404 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:27 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/about.html b/public/html/about.html
new file mode 100644
index 0000000..4233694
--- /dev/null
+++ b/public/html/about.html
@@ -0,0 +1,1085 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/about by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:07 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-gray !bg-[rgba(246,247,249)]">
+      <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item dropdown language-select uppercase group">
+                <a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
+                <ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
+                </ul>
+              </li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+    </header>
+    <!-- /header -->
+    <section class="wrapper  bg-[rgba(246,247,249,1)] ">
+      <div class="container pt-10 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] !text-center">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="xl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4">Hello! This is Trunçgil</h1>
+            <p class="lead text-[1.05rem] !leading-[1.6] font-medium !mb-0">A company turning ideas into beautiful things.</p>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+      <figure class="absoute" style="bottom: 0; left: 0; z-index: 2;"><img src="assets/img/photos/bg12.jpg" alt="image"></figure>
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]  angled upper-end lower-end relative border-0 before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#fefefe] before:content-[''] before:block before:absolute before:z-0 before:!border-y-transparent before:border-0 before:border-solid before:right-0 after:bottom-[-4rem] after:border-l-transparent after:border-r-[100vw] after:border-b-[4rem] after:border-[#fefefe] after:content-[''] after:block after:absolute after:z-0 after:!border-y-transparent after:border-0 after:border-solid after:right-0">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
+          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full !relative xl:!order-2 lg:!order-2">
+            <div class="shape bg-dot primary bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] rellax !w-[6rem] !h-[10rem] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: 3rem; left: 5.5rem"></div>
+            <div class="flex flex-wrap !relative overlap-grid-2">
+              <div class="item xl:w-[70%] xl:z-[3] xl:ml-[30%] xl:!mt-0 lg:w-[70%] lg:z-[3] lg:ml-[30%] lg:!mt-0 md:w-[70%] md:z-[3] md:ml-[30%] md:!mt-0">
+                <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative"><img class="!rounded-[.4rem] " src="assets/img/photos/about2.jpg" alt="image"></figure>
+              </div>
+              <div class="item xl:w-[55%] xl:!mt-[-45%] xl:z-[4] xl:ml-0 lg:w-[55%] lg:!mt-[-45%] lg:z-[4] lg:ml-0 md:w-[55%] md:!mt-[-45%] md:z-[4] md:ml-0">
+                <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative"><img class="!rounded-[.4rem] " src="assets/img/photos/about3.jpg" alt="image"></figure>
+              </div>
+            </div>
+          </div>
+          <!--/column -->
+          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 362.5" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/megaphone.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !mb-4"><path class="lineal-stroke" d="M343.4 302.9L61 302.5c-25.3-.2-47.5-16.8-54.8-40.9l-3.9-12.9c-7.1-24.2 2.5-50.3 23.5-64.2L262.1 29.8c5.7-3.7 13.3-2.1 17 3.6.7 1 1.2 2.1 1.5 3.2l74.3 249.8c2.4 6.4-.9 13.5-7.3 15.8-1.3.5-2.8.7-4.2.7zM261.8 59.4L39.3 205c-12 7.9-17.4 22.8-13.4 36.6l3.8 12.9c4.2 13.8 16.8 23.3 31.2 23.4l265.8.4-64.9-218.9z"></path><path class="lineal-stroke" d="M138 362.5c-40.4 0-72.8-31.1-73.6-70.8 0-6.8 5.5-12.3 12.3-12.3 6.6 0 12.1 5.2 12.3 11.8.6 26.2 22.1 46.7 49 46.7 14.2 0 27.7-6.2 37-16.9 4.5-5.1 12.2-5.7 17.4-1.2 5.1 4.5 5.7 12.2 1.2 17.4-14 16.1-34.3 25.3-55.6 25.3z"></path><path class="lineal-fill" d="M183.4 96l57.8 194.5 102.1.1-74.5-250.5L183.4 96z"></path><path class="lineal-stroke" d="M343.4 302.9l-102.1-.1c-5.4 0-10.2-3.6-11.8-8.8L171.6 99.5c-1.6-5.2.5-10.8 5.1-13.8l85.4-55.9c5.7-3.7 13.3-2.1 17 3.6.7 1 1.2 2.1 1.5 3.2l74.5 250.6c1.9 6.5-1.8 13.4-8.3 15.3-1.1.2-2.3.4-3.4.4zm-92.9-24.7l76.4.1-65.1-218.9-63.9 41.8 52.6 177z"></path><path class="lineal-stroke" d="M351.8 330.6c-5.4 0-10.2-3.6-11.8-8.8l-91-306c-2.1-6.5 1.3-13.4 7.8-15.6 6.5-2.1 13.4 1.3 15.6 7.8.1.3.2.5.2.8l91 305.9c1.9 6.5-1.8 13.4-8.3 15.3-1.1.4-2.3.6-3.5.6zM338 91.7c-6.8 0-12.3-5.5-12.3-12.3 0-1.8.4-3.6 1.2-5.3l13.4-28.5c2.9-6.2 10.2-8.8 16.4-5.9 6.2 2.9 8.8 10.2 5.9 16.4l-13.4 28.5c-2.1 4.3-6.4 7.1-11.2 7.1zm28.2 64.9c-6.8 0-12.3-5.5-12.3-12.3 0-5.7 3.9-10.6 9.4-12l31.1-7.5c6.6-1.5 13.2 2.6 14.7 9.3 1.5 6.5-2.5 13-9 14.7l-31.2 7.4c-.8.3-1.8.4-2.7.4zm29.1 90c-2.7 0-5.4-.9-7.5-2.6l-24.9-19.4c-5.4-4.2-6.3-11.9-2.2-17.3s11.9-6.3 17.3-2.2l24.9 19.4c5.4 4.2 6.3 11.9 2.1 17.3-2.3 3-5.9 4.7-9.7 4.8z"></path></svg>
+            <h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">Who Are We?</h2>
+            <p class="lead !text-[1.05rem] !leading-[1.6] font-medium">We are a digital and branding company that believes in the power of creative strategy and along with great design.</p>
+            <p class="!mb-6">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+            <div class="flex flex-wrap mx-[-15px] !mt-[-15px] xl:mx-[-20px]">
+              <div class="xl:w-6/12 w-full flex-[0_0_auto] !mt-[15px] xl:!px-[20px] !px-[15px] max-w-full">
+                <ul class="pl-0 list-none bullet-bg bullet-soft-primary  !mb-0">
+                  <li class="relative !pl-6"><span><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span><span>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>
+                  <li class="relative !pl-6 !mt-3"><span><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>
+                </ul>
+              </div>
+              <!--/column -->
+              <div class="xl:w-6/12 w-full flex-[0_0_auto] !mt-[15px] xl:!px-[20px] !px-[15px] max-w-full">
+                <ul class="pl-0 list-none bullet-bg bullet-soft-primary  !mb-0">
+                  <li class="relative !pl-6"><span><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span><span>Etiam porta sem malesuada magna mollis euismod.</span></li>
+                  <li class="relative !pl-6 !mt-3"><span><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>
+                </ul>
+              </div>
+              <!--/column -->
+            </div>
+            <!--/.row -->
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+        <div class="flex flex-wrap mx-[-15px] !mb-5">
+          <div class="md:w-10/12 lg:w-10/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 447" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/list.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !mb-4 m-[0_auto]"><path class="lineal-stroke" d="M102.4 447C45.8 447 0 401.1 0 344.6s45.9-102.4 102.4-102.4c36.3 0 69.9 19.2 88.3 50.5 4.1 6.9 1.8 15.8-5.2 19.9-6.9 4.1-15.8 1.8-19.9-5.2-20.5-34.9-65.4-46.6-100.3-26.1s-46.6 65.4-26.1 100.3 65.4 46.6 100.3 26.1c10.2-6 18.8-14.3 25-24.3 4.3-6.8 13.2-8.9 20.1-4.6 6.8 4.3 8.9 13.2 4.6 20.1-18.7 30-51.5 48.2-86.8 48.1zm395.1-119.8H254.3c-8-.2-14.4-6.9-14.2-14.9.2-7.7 6.4-14 14.2-14.2h243.1c8 .2 14.4 6.9 14.2 14.9-.2 7.8-6.4 14-14.1 14.2zm-91.2 63.9h-152c-8-.2-14.4-6.9-14.2-14.9.2-7.7 6.4-14 14.2-14.2h152c8 .2 14.4 6.9 14.2 14.9-.2 7.7-6.5 14-14.2 14.2z"></path><circle class="lineal-fill" cx="102.4" cy="102.4" r="87.8"></circle><path class="lineal-stroke" d="M102.4 204.8C45.8 204.8 0 158.9 0 102.4S45.8 0 102.4 0s102.4 45.8 102.4 102.4c-.1 56.5-45.9 102.3-102.4 102.4zm0-175.7c-40.5 0-73.3 32.8-73.3 73.3s32.8 73.3 73.3 73.3 73.3-32.8 73.3-73.3c-.1-40.5-32.9-73.2-73.3-73.3zM497.5 85H254.3c-8-.2-14.4-6.9-14.2-14.9.2-7.7 6.4-14 14.2-14.2h243.1c8 .2 14.4 6.9 14.2 14.9-.2 7.8-6.4 14-14.1 14.2zm-91.2 63.8h-152c-8-.2-14.4-6.9-14.2-14.9.2-7.7 6.4-14 14.2-14.2h152c8 .2 14.4 6.9 14.2 14.9-.2 7.8-6.5 14-14.2 14.2z"></path></svg>
+            <h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-4 xl:!px-[4.5rem] lg:!px-[4.5rem]">Here are 3 working steps to organize our business projects.</h2>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
+          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
+            <div class="card xl:!mr-6 lg:!mr-6">
+              <div class="card-body p-6">
+                <div class="flex flex-row">
+                  <div>
+                    <span class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]"><span class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">01</span></span>
+                  </div>
+                  <div>
+                    <h4 class="!mb-1">Collect Ideas</h4>
+                    <p class="!mb-0">Nulla vitae elit libero pharetra augue dapibus.</p>
+                  </div>
+                </div>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+            <div class="card !mt-6 xl:!ml-16 lg:!ml-16">
+              <div class="card-body p-6">
+                <div class="flex flex-row">
+                  <div>
+                    <span class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]"><span class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">02</span></span>
+                  </div>
+                  <div>
+                    <h4 class="!mb-1">Data Analysis</h4>
+                    <p class="!mb-0">Vivamus sagittis lacus vel augue laoreet.</p>
+                  </div>
+                </div>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+            <div class="card !mt-6 xl:mx-6 lg:mx-6">
+              <div class="card-body p-6">
+                <div class="flex flex-row">
+                  <div>
+                    <span class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]"><span class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">03</span></span>
+                  </div>
+                  <div>
+                    <h4 class="!mb-1">Finalize Product</h4>
+                    <p class="!mb-0">Cras mattis consectetur purus sit amet.</p>
+                  </div>
+                </div>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </div>
+          <!--/column -->
+          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
+            <h2 class="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-3">How It Works?</h2>
+            <p class="lead text-[1rem] xl:!pr-5 lg:!pr-5">Find out everything you need to know and more about how we create our business process models.</p>
+            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare.</p>
+            <p class="!mb-6">Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis.</p>
+            <a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Learn More</a>
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#edf2fc]">
+      <div class="container pt-24 pb-[4.5rem] xl:pb-0 lg:pb-0 md:pb-0">
+        <div class="flex flex-wrap mx-[-15px] lg:mx-[-20px] xl:mx-0 items-center">
+          <div class="md:w-5/12 lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] lg:!px-[20px] xl:px-0 max-w-full xl:!ml-[8.33333333%] max-lg:!hidden xl:!flex lg:!flex !relative !self-end">
+            <div class="shape !rounded-[50%] !bg-[#e0e9fa] rellax !w-[12.5rem] !h-[12.5rem] hidden xl:block lg:block z-[1] absolute" data-rellax-speed="1" style="top: 7rem; left: 1rem"></div>
+            <figure class=" relative z-[2]"><img class="w-full max-w-full !h-auto" src="assets/img/photos/co1.png" alt="image"></figure>
+          </div>
+          <!--/column -->
+          <div class="md:w-7/12 lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] lg:!px-[20px] xl:px-0 max-w-full xl:!ml-[8.33333333%]">
+            <div class="swiper-container dots-start dots-closer xl:!mt-10 lg:!mt-10 md:!mt-10 xl:!mb-20 lg:!mb-20 md:!mb-20 relative !z-10" data-margin="30" data-dots="true">
+              <div class="swiper">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide">
+                    <blockquote class="icon relative p-0 border-0 text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
+                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit.”</p>
+                      <div class="flex items-center text-left">
+                        <div class="info !pl-0">
+                          <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
+                          <p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
+                        </div>
+                      </div>
+                    </blockquote>
+                  </div>
+                  <!--/.swiper-slide -->
+                  <div class="swiper-slide">
+                    <blockquote class="icon relative p-0 border-0 text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
+                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus curabitur blandit.”</p>
+                      <div class="flex items-center text-left">
+                        <div class="info !pl-0">
+                          <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
+                          <p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
+                        </div>
+                      </div>
+                    </blockquote>
+                  </div>
+                  <!--/.swiper-slide -->
+                  <div class="swiper-slide">
+                    <blockquote class="icon relative p-0 border-0 text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
+                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus curabitur blandit.”</p>
+                      <div class="flex items-center text-left">
+                        <div class="info !pl-0">
+                          <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
+                          <p class="!mb-0 text-[0.8rem]">Sales Manager</p>
+                        </div>
+                      </div>
+                    </blockquote>
+                  </div>
+                  <!--/.swiper-slide -->
+                </div>
+                <!--/.swiper-wrapper -->
+              </div>
+              <!-- /.swiper -->
+            </div>
+            <!-- /.swiper-container -->
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] !mb-3">
+          <div class="md:w-10/12 lg:w-10/12 xl:w-9/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 356.2" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/team.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !mb-4 m-[0_auto]"><path class="lineal-fill" d="M265.2 180.7H144.4v-17.6c0-33.3 27-60.4 60.4-60.4s60.4 27 60.4 60.4v17.6z"></path><path class="lineal-stroke" d="M265.2 191.7H144.4c-6.1 0-11.1-5-11.1-11.1V163c-.5-39.5 31.1-71.8 70.6-72.3s71.8 31.1 72.3 70.6v19.3c0 6.2-4.9 11.1-11 11.1zm-109.7-22.1h98.6v-6.5c.4-27.2-21.4-49.6-48.6-50s-49.6 21.4-50 48.6v7.9z"></path><path class="lineal-fill" d="M250.4 56.7c0 25.2-20.4 45.6-45.6 45.6s-45.6-20.4-45.6-45.6 20.4-45.6 45.6-45.6c25.2 0 45.6 20.4 45.6 45.6z"></path><path class="lineal-stroke" d="M204.8 113.3c-31.3 0-56.7-25.4-56.7-56.7S173.5-.1 204.8-.1s56.7 25.4 56.7 56.7c-.1 31.3-25.4 56.7-56.7 56.7zm0-91.2c-19.1 0-34.5 15.4-34.5 34.5s15.4 34.5 34.5 34.5 34.5-15.4 34.5-34.5c0-19-15.5-34.4-34.5-34.5zm193.7 334.1H296.8c-6.1 0-11.1-5-11.1-11.1v-14.8c0-34.2 27.8-62 62-62 6.1-.2 11.2 4.6 11.4 10.7s-4.6 11.2-10.7 11.4h-.7c-22 0-39.8 17.8-39.8 39.8v3.8h79.6v-3.7c0-3.2-.4-6.5-1.2-9.6-1.4-6 2.3-11.9 8.3-13.3 5.8-1.4 11.7 2.2 13.2 8 1.2 4.9 1.8 9.9 1.8 14.9v14.8c0 6.1-4.9 11.1-11.1 11.1z"></path><path class="lineal-stroke" d="M347.6 290.5c-27.3 0-49.5-22.2-49.5-49.5s22.2-49.5 49.5-49.5 49.5 22.2 49.5 49.5-22.2 49.5-49.5 49.5zm0-76.9c-15.1 0-27.3 12.3-27.3 27.4 0 15.1 12.3 27.3 27.4 27.3S375 256 375 241c0-15.1-12.3-27.3-27.4-27.4zM112.8 356.2H11.1c-6.1 0-11.1-5-11.1-11.1v-14.8c0-34.2 27.8-62 62-62 6.1.2 10.9 5.3 10.7 11.4-.2 5.9-4.9 10.6-10.7 10.7-22 0-39.8 17.8-39.8 39.8v3.8h79.6v-3.7c0-3.2-.4-6.5-1.2-9.6-1.5-5.9 2.2-11.9 8.1-13.4s11.9 2.2 13.4 8.1c1.2 4.9 1.8 9.9 1.8 14.9v14.8c.1 6.1-4.9 11.1-11.1 11.1.1 0 .1 0 0 0z"></path><path class="lineal-stroke" d="M61.9 290.5c-27.3 0-49.5-22.2-49.5-49.5s22.2-49.5 49.5-49.5 49.5 22.2 49.5 49.5-22.1 49.5-49.5 49.5zm0-76.9c-15.1 0-27.3 12.2-27.3 27.4 0 15.1 12.2 27.4 27.4 27.4 15.1 0 27.3-12.2 27.3-27.3 0-15.2-12.3-27.4-27.4-27.5zm142.9 72.1c-6.1 0-11.1-5-11.1-11.1v-56.4c-.2-6.1 4.6-11.2 10.7-11.4 6.1-.2 11.2 4.6 11.4 10.7v57.1c.1 6.2-4.9 11.1-11 11.1z"></path><path class="lineal-stroke" d="M279.5 285.7H130.1c-6.1.2-11.2-4.6-11.4-10.7s4.6-11.2 10.7-11.4h150.2c6.1-.2 11.2 4.6 11.4 10.7s-4.6 11.2-10.7 11.4h-.8z"></path></svg>
+            <h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 xl:!px-[4.5rem] lg:!px-[4.5rem]">Save your time and money by choosing our professional team.</h2>
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+        <div class="!relative">
+          <div class="shape !rounded-[50%] !bg-[#fff8ee] rellax !w-[6rem] !h-[6rem] absolute z-[1]" data-rellax-speed="1" style="bottom: 0.5rem; right: -1.7rem;"></div>
+          <div class="shape !rounded-[50%] bg-line red rellax !w-[6rem] !h-[6rem] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: 0.5rem; left: -1.7rem;"></div>
+          <div class="swiper-container dots-closer !mb-6" data-margin="0" data-dots="true" data-items-xxl="4" data-items-xl="3" data-items-lg="3" data-items-md="2" data-items-xs="1">
+            <div class="swiper">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                  <div class="item-inner">
+                    <div class="card">
+                      <div class="card-body p-[40px]">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te1.jpg" alt="image">
+                        <h4 class="!mb-1">Coriss Ambady</h4>
+                        <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Financial Analyst</div>
+                        <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
+                        <nav class="nav social !mb-0">
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
+                        </nav>
+                        <!-- /.social -->
+                      </div>
+                      <!--/.card-body -->
+                    </div>
+                    <!-- /.card -->
+                  </div>
+                  <!-- /.item-inner -->
+                </div>
+                <!--/.swiper-slide -->
+                <div class="swiper-slide">
+                  <div class="item-inner">
+                    <div class="card">
+                      <div class="card-body p-[40px]">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te2.jpg" alt="image">
+                        <h4 class="!mb-1">Cory Zamora</h4>
+                        <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Marketing Specialist</div>
+                        <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
+                        <nav class="nav social !mb-0">
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
+                        </nav>
+                        <!-- /.social -->
+                      </div>
+                      <!--/.card-body -->
+                    </div>
+                    <!-- /.card -->
+                  </div>
+                  <!-- /.item-inner -->
+                </div>
+                <!--/.swiper-slide -->
+                <div class="swiper-slide">
+                  <div class="item-inner">
+                    <div class="card">
+                      <div class="card-body p-[40px]">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te3.jpg" alt="image">
+                        <h4 class="!mb-1">Nikolas Brooten</h4>
+                        <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Sales Manager</div>
+                        <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
+                        <nav class="nav social !mb-0">
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
+                        </nav>
+                        <!-- /.social -->
+                      </div>
+                      <!--/.card-body -->
+                    </div>
+                    <!-- /.card -->
+                  </div>
+                  <!-- /.item-inner -->
+                </div>
+                <!--/.swiper-slide -->
+                <div class="swiper-slide">
+                  <div class="item-inner">
+                    <div class="card">
+                      <div class="card-body p-[40px]">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te4.jpg" alt="image">
+                        <h4 class="!mb-1">Jackie Sanders</h4>
+                        <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Investment Planner</div>
+                        <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
+                        <nav class="nav social !mb-0">
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
+                        </nav>
+                        <!-- /.social -->
+                      </div>
+                      <!--/.card-body -->
+                    </div>
+                    <!-- /.card -->
+                  </div>
+                  <!-- /.item-inner -->
+                </div>
+                <!--/.swiper-slide -->
+                <div class="swiper-slide">
+                  <div class="item-inner">
+                    <div class="card">
+                      <div class="card-body p-[40px]">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te5.jpg" alt="image">
+                        <h4 class="!mb-1">Laura Widerski</h4>
+                        <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Sales Specialist</div>
+                        <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
+                        <nav class="nav social !mb-0">
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
+                        </nav>
+                        <!-- /.social -->
+                      </div>
+                      <!--/.card-body -->
+                    </div>
+                    <!-- /.card -->
+                  </div>
+                  <!-- /.item-inner -->
+                </div>
+                <!--/.swiper-slide -->
+                <div class="swiper-slide">
+                  <div class="item-inner">
+                    <div class="card">
+                      <div class="card-body p-[40px]">
+                        <img class="rounded-[50%] !w-[5rem] !mb-4" src="assets/img/avatars/te6.jpg" alt="image">
+                        <h4 class="!mb-1">Tina Geller</h4>
+                        <div class="!text-[0.65rem] !mb-2 uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc]">Financial Analyst</div>
+                        <p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
+                        <nav class="nav social !mb-0">
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                          <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
+                        </nav>
+                        <!-- /.social -->
+                      </div>
+                      <!--/.card-body -->
+                    </div>
+                    <!-- /.card -->
+                  </div>
+                  <!-- /.item-inner -->
+                </div>
+                <!--/.swiper-slide -->
+              </div>
+              <!--/.swiper-wrapper -->
+            </div>
+            <!-- /.swiper -->
+          </div>
+          <!-- /.swiper-container -->
+        </div>
+        <!-- /.relative -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#edf2fc]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] !mb-10">
+          <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-30px] !text-center">
+              <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 409.6" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/check.svg" class="svg-inject icon-svg icon-svg-lg text-[#3f78e0] !mb-3 !w-12 !h-12 m-[0_auto]"><path class="lineal-stroke" d="M204.8 409.6C91.9 409.6 0 317.7 0 204.8c0-49.9 18.2-98.1 51.2-135.5 4.4-5 12-5.5 17-1.1s5.5 12 1.1 17c-29.1 33-45.2 75.5-45.2 119.5 0 99.6 81.1 180.7 180.7 180.7s180.7-81.1 180.7-180.7S304.4 24.1 204.8 24.1c-27.3-.1-54.2 6.1-78.7 18-6 2.9-13.2.4-16.1-5.6-2.9-6-.4-13.2 5.6-16.1C143.4 6.9 173.9-.1 204.8 0c112.9 0 204.8 91.9 204.8 204.8s-91.9 204.8-204.8 204.8z"></path><path class="lineal-fill" d="M349.4 204.8c0 79.8-64.7 144.6-144.6 144.6S60.2 284.6 60.2 204.8 125 60.2 204.8 60.2 349.4 125 349.4 204.8z"></path><path class="lineal-stroke" d="M204.8 361.4c-86.4 0-156.6-70.2-156.6-156.6S118.4 48.2 204.8 48.2s156.6 70.2 156.6 156.6-70.2 156.6-156.6 156.6zm0-289.1c-73.1 0-132.5 59.4-132.5 132.5s59.4 132.5 132.5 132.5 132.5-59.5 132.5-132.5S277.9 72.3 204.8 72.3z"></path><path class="lineal-stroke" d="M200.9 246.7c-8.8 0-17.2-3.5-23.5-9.7L145 204.5c-4.7-4.7-4.7-12.3 0-17s12.3-4.7 17 0l32.5 32.5c3.6 3.5 9.3 3.5 12.8 0l49.8-49.9c4.7-4.7 12.3-4.7 17 0s4.7 12.3 0 17L224.4 237c-6.2 6.2-14.7 9.7-23.5 9.7z"></path></svg>
+                <h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">7518</h3>
+                <p class=" text-[0.8rem] font-medium !mb-0">Completed Projects</p>
+              </div>
+              <!--/column -->
+              <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 441.4 512" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/user.svg" class="svg-inject icon-svg icon-svg-lg text-[#3f78e0] !mb-3 !w-12 !h-12 m-[0_auto]"><path class="lineal-fill" d="M254.9 457c-14.9-8.1-24.1-23.7-24.1-40.6V285.6c26.5 11.1 57.1 4.9 77.1-15.6-19-26.2-49.3-41.6-81.6-41.6H115.7c-55.7 0-100.9 45.2-100.9 100.9v167.9h312.4v-.8L254.9 457z"></path><path class="lineal-stroke" d="M426.6 270.8c-8.2 0-14.8 6.6-14.9 14.8v130.7c0 11.5-6.3 22.1-16.4 27.6l-66.7 36.3-66.6-36.3c-10.1-5.5-16.4-16.1-16.4-27.6V305c4.1.6 8.2.9 12.3.9 1.3 0 2.5 0 3.8-.1h1c1.1-.1 2.2-.1 3.4-.2l1.6-.2 1.6-.2c15-2 29.3-8 41.1-17.5l1.1-.9 1.3-1.1c.9-.7 1.7-1.5 2.5-2.2l.4-.4c1-.9 1.9-1.8 2.8-2.7 3.8-3.9 7.2-8.1 10.1-12.6 7.2 10.9 16.8 19.9 28 26.5 7.1 4.1 16.2 1.8 20.3-5.3 4.1-7.1 1.8-16.2-5.3-20.3-10-5.9-17.9-14.8-22.6-25.5-2.4-5.4-7.7-8.8-13.6-8.9h-13.5c-5.9 0-11.2 3.5-13.6 8.9-.5 1-.9 2-1.4 3-12.8-12.4-28.4-21.7-45.4-27.2 17.4-16.5 27.2-39.4 27.2-63.3V87.5c-.2-8.2-7-14.7-15.2-14.5-7.9.2-14.3 6.6-14.5 14.5v68.3c0 31.6-25.5 57.4-57.1 57.8h-62c-31.6-.5-57-26.2-57-57.8V87.5c0-31.9 25.9-57.8 57.8-57.8h60.5c8.2-.2 14.7-7 14.5-15.2-.2-7.9-6.6-14.3-14.5-14.5h-60.5C92.5.1 53.3 39.2 53.3 87.5v68.3c0 23.9 9.8 46.8 27.2 63.3C32.6 234.5.1 279 0 329.3v167.9c0 8.2 6.6 14.8 14.8 14.8h313.9c2.5 0 4.9-.6 7.1-1.8l73.8-40.2c19.6-10.7 31.9-31.3 31.9-53.6V285.6c-.1-8.2-6.7-14.8-14.9-14.8zM29.7 482.3v-153c.1-47.5 38.5-85.9 86-86h40.4v144.1c0 8.2 6.6 14.8 14.8 14.8s14.8-6.6 14.8-14.8V243.3h40.4c22.6 0 44.3 9 60.4 24.8-6.3 3.9-13.3 6.4-20.6 7.5h.1c-1.1.2-2.3.3-3.5.4l-.6.1c-1.2.1-2.5.1-3.7.1h-.2c-7.3 0-14.6-1.4-21.4-4.3-7.5-3.2-16.3.3-19.4 7.9-.8 1.8-1.2 3.8-1.2 5.8v130.7c0 22.4 12.2 42.9 31.8 53.7l22.6 12.3H29.7z"></path><path class="lineal-stroke" d="M327.2 405.9c-2.5 0-5-.6-7.2-1.9l-24.9-13.9c-7.2-4-9.7-13-5.7-20.2s13-9.7 20.2-5.7l15.7 8.7 34.1-30.1c6.1-5.4 15.5-4.9 21 1.3 5.4 6.1 4.9 15.5-1.3 21l-42 37.1c-2.8 2.4-6.3 3.7-9.9 3.7z"></path></svg>
+                <h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">3472</h3>
+                <p class=" text-[0.8rem] font-medium !mb-0">Satisfied Customers</p>
+              </div>
+              <!--/column -->
+              <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 380.8" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/briefcase-2.svg" class="svg-inject icon-svg icon-svg-lg text-[#3f78e0] !mb-3 !w-12 !h-12 m-[0_auto]"><path class="lineal-stroke" d="M299.9 104.7h-23.8V56.5c0-18.1-14.6-32.7-32.7-32.7h-77.2c-18 0-32.7 14.7-32.7 32.7v48.2h-23.8V56.5C109.8 25.3 135 0 166.2 0h77.2c31.2 0 56.4 25.3 56.5 56.5v48.2z"></path><path class="lineal-stroke" d="M360.5 380.8H49.1c-27.1 0-49-22-49.1-49.1V119.1C0 92 22 70 49.1 70h311.5c27.1 0 49 22 49.1 49.1v212.7c-.1 27.1-22.1 49-49.2 49zM49.1 93.8c-14 0-25.3 11.3-25.3 25.3v212.7c0 14 11.3 25.3 25.3 25.3h311.5c14 0 25.3-11.3 25.3-25.3V119.1c0-14-11.3-25.3-25.3-25.3H49.1z"></path><path class="lineal-fill" d="M49.2 81.7c-18.4 0-33.3 14.8-33.3 33.2 0 2.7.3 5.3.9 7.9C35.4 197.9 103.6 254 184.2 254h41.2c80.6 0 148.8-56.1 167.3-131.2 4.3-17.8-6.6-35.8-24.5-40.2-2.6-.6-5.2-.9-7.9-.9H49.2z"></path><path class="lineal-stroke" d="M225.4 265.9h-41.2c-41.5-.1-81.8-14.2-114.3-40C38 200.5 15.3 165.2 5.4 125.6-.5 101.4 14.3 77 38.6 71.1c3.5-.9 7.1-1.3 10.7-1.3h311.1c24.9 0 45.2 20.2 45.2 45.1 0 3.6-.4 7.2-1.3 10.7-9.9 39.6-32.6 74.8-64.5 100.2-32.6 25.9-72.9 40-114.4 40.1zM49.2 93.6c-6.6 0-12.9 3-16.9 8.2-4.1 5.1-5.5 11.8-3.9 18.2 17.6 71.8 81.9 122.3 155.8 122.2h41.2c73.9.1 138.3-50.4 155.8-122.2 1.6-6.3.1-13-3.9-18.1-4.1-5.2-10.3-8.3-16.9-8.2l-311.2-.1z"></path><path class="lineal-fill" d="M128.5 288.5h-13.8c-8.9 0-16.1-7.2-16.1-16.1v-48.3c0-8.9 7.2-16.1 16.1-16.1h13.8c8.9 0 16.1 7.2 16.1 16.1v48.3c0 8.9-7.2 16.1-16.1 16.1z"></path><path class="lineal-stroke" d="M128.5 300.4h-13.8c-15.5 0-28-12.5-28-28v-48.3c0-15.5 12.5-28 28-28h13.8c15.5 0 28 12.5 28 28v48.3c0 15.5-12.5 28-28 28zm-13.8-80.5c-2.3 0-4.2 1.9-4.2 4.2v48.3c0 2.3 1.9 4.2 4.2 4.2h13.8c2.3 0 4.2-1.9 4.2-4.2v-48.3c0-2.3-1.9-4.2-4.2-4.2h-13.8z"></path><path class="lineal-fill" d="M294.9 288.5h-13.8c-8.9 0-16.1-7.2-16.1-16.1v-48.3c0-8.9 7.2-16.1 16.1-16.1h13.8c8.9 0 16.1 7.2 16.1 16.1v48.3c0 8.9-7.2 16.1-16.1 16.1z"></path><path class="lineal-stroke" d="M294.9 300.4h-13.8c-15.5 0-28-12.5-28-28v-48.3c0-15.5 12.5-28 28-28h13.8c15.5 0 28 12.5 28 28v48.3c0 15.5-12.5 28-28 28zm-13.8-80.5c-2.3 0-4.2 1.9-4.2 4.2v48.3c0 2.3 1.9 4.2 4.2 4.2h13.8c2.3 0 4.2-1.9 4.2-4.2v-48.3c0-2.3-1.9-4.2-4.2-4.2h-13.8z"></path></svg>
+                <h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">2184</h3>
+                <p class=" text-[0.8rem] font-medium !mb-0">Expert Employees</p>
+              </div>
+              <!--/column -->
+              <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 404.7" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/award-2.svg" class="svg-inject icon-svg icon-svg-lg text-[#3f78e0] !mb-3 !w-12 !h-12 m-[0_auto]"><path class="lineal-stroke" d="M90.8 404.7c-6.5 0-12.4-4-14.7-10.1L57.7 347 10 328.7c-8.1-3.1-12.2-12.2-9-20.4.8-2 2-3.9 3.5-5.5l93.6-93.6 97.3 97.3-93.6 93.6c-2.9 2.9-6.9 4.6-11 4.6zm-60.7-93.8l39.5 15.2c4.1 1.6 7.4 4.9 9 9l15.2 39.5 68.1-68.1-63.7-63.7-68.1 68.1zm288.7 93.8c-4.2 0-8.2-1.7-11.1-4.6l-20.8-20.8 16.8-16.8 12.1 12.1 15.2-39.5c1.6-4.1 4.9-7.4 9-9l39.4-15.2-76.4-76.5 16.8-16.8 85.2 85.2c6.1 6.1 6.1 16.1 0 22.3-1.6 1.6-3.4 2.8-5.5 3.6L351.9 347l-18.3 47.6c-1.9 5-6.2 8.7-11.4 9.8-1.1.2-2.2.3-3.4.3z"></path><path class="lineal-fill" d="M347.3 224.1c5.1-15.7 31-28.9 31-46.3s-25.9-30.6-31-46.3c-5.3-16.3 7.8-42.2-2.1-55.7s-38.6-9.2-52.4-19.2-18-38.6-34.4-43.9C242.7 7.6 222.2 28 204.8 28s-37.9-20.4-53.6-15.3c-16.3 5.3-20.8 34-34.4 43.9s-42.4 5.5-52.4 19.2 3.2 39.4-2.1 55.7c-5.1 15.7-31.1 28.8-31.1 46.3s25.9 30.6 31 46.3c5.3 16.3-7.8 42.1 2.1 55.7S103 289 116.7 299s18.1 38.6 34.4 43.9c15.7 5.1 36.2-15.3 53.6-15.3s37.9 20.4 53.6 15.3c16.3-5.3 20.8-34 34.4-43.9s42.4-5.5 52.4-19.2-3.1-39.3 2.2-55.7zm-142.5 48.7c-52.5 0-95-42.5-95-95s42.5-95 95-95 95 42.5 95 95-42.5 95-95 95z"></path><path class="lineal-stroke" d="M253 355.7c-10.1 0-19.6-4.6-28.8-9.1-7-3.4-14.3-7-19.4-7s-12.4 3.6-19.4 7c-9.2 4.5-18.7 9.1-28.8 9.1-3.1 0-6.2-.5-9.1-1.4-13.7-4.5-20.7-17.6-26.8-29.2-3.5-6.7-7.2-13.6-10.9-16.3s-11.6-4.2-19.2-5.5c-12.8-2.2-27.4-4.8-35.8-16.3s-6.3-26-4.5-38.8c1.1-7.6 2.2-15.6.7-20.2-1.4-4.2-6.7-9.8-11.9-15.1-9.2-9.5-19.7-20.2-19.7-34.9s10.5-25.4 19.7-34.9c5.2-5.3 10.6-10.8 12-15.1 1.5-4.7.4-12.6-.7-20.2C48.6 95 46.5 80.4 54.8 69s23-14.1 35.8-16.3c7.5-1.3 15.3-2.7 19.2-5.5s7.4-9.6 10.9-16.3c6.1-11.6 13.1-24.8 26.8-29.2 2.9-1 6-1.4 9.1-1.4 10.1 0 19.6 4.6 28.8 9.1 7 3.4 14.3 7 19.4 7s12.4-3.6 19.4-7C233.4 4.6 243 0 253 0c3.1 0 6.2.5 9.1 1.4 13.7 4.5 20.7 17.6 26.8 29.2 3.5 6.7 7.2 13.6 10.9 16.3s11.6 4.2 19.2 5.5c12.9 2.2 27.4 4.8 35.8 16.3s6.3 26 4.5 38.8c-1.1 7.6-2.2 15.6-.7 20.2 1.4 4.2 6.7 9.8 11.9 15.1 9.2 9.5 19.7 20.2 19.7 34.9s-10.5 25.4-19.7 34.9c-5.2 5.3-10.6 10.9-11.9 15.1-1.5 4.7-.4 12.6.7 20.2 1.8 12.9 3.9 27.4-4.5 38.8s-23 14.1-35.8 16.3c-7.5 1.3-15.3 2.7-19.2 5.5s-7.4 9.6-10.9 16.3c-6.1 11.6-13.1 24.8-26.8 29.2-2.9 1.2-6 1.7-9.1 1.7zm-48.2-39.9c10.6 0 20.4 4.8 29.8 9.4 6.8 3.3 13.8 6.7 18.4 6.7.6 0 1.2-.1 1.7-.2 4.5-1.5 9.1-10.1 13.1-17.8 4.8-9.1 9.8-18.5 18-24.5s18.9-7.9 29.1-9.7c8.4-1.5 18-3.1 20.7-6.9s1.3-13.2.1-21.6c-1.4-10.3-2.9-21 .3-30.8 3.1-9.5 10.4-17 17.5-24.3 6.1-6.2 13-13.3 13-18.3s-6.9-12.1-13-18.3c-7.1-7.3-14.4-14.8-17.5-24.3-3.2-9.9-1.7-20.5-.3-30.8 1.2-8.4 2.5-17.9-.1-21.6s-12.3-5.4-20.7-6.9c-10.2-1.8-20.8-3.6-29.1-9.7s-13.2-15.4-18-24.5c-4-7.6-8.6-16.3-13.1-17.8-.6-.2-1.2-.3-1.8-.2-4.6 0-11.6 3.4-18.4 6.7-9.5 4.6-19.3 9.4-29.8 9.4s-20.4-4.8-29.8-9.4c-6.8-3.3-13.8-6.7-18.4-6.7-.6 0-1.2.1-1.8.2-4.5 1.5-9.1 10.1-13.1 17.8-4.8 9.1-9.8 18.5-18 24.5s-18.9 7.9-29.1 9.7c-8.4 1.5-18 3.2-20.7 6.9s-1.3 13.2-.1 21.6c1.4 10.3 2.9 21-.3 30.8-3.1 9.5-10.4 17-17.5 24.3-6 6.2-12.9 13.3-12.9 18.3s6.9 12.1 13 18.3c7.1 7.3 14.4 14.8 17.5 24.3 3.2 9.9 1.7 20.5.3 30.8-1.2 8.4-2.5 17.9.1 21.6s12.3 5.4 20.7 6.9c10.2 1.8 20.8 3.6 29.1 9.7s13.2 15.4 18 24.5c4 7.6 8.6 16.3 13.1 17.7.6.2 1.2.3 1.8.2 4.6 0 11.6-3.4 18.4-6.7 9.5-4.6 19.3-9.3 29.8-9.3z"></path><path class="lineal-stroke" d="M204.8 284.7c-59 0-106.9-47.9-106.9-106.9 0-59 47.9-106.9 106.9-106.9 59 0 106.9 47.8 106.9 106.8v.1c-.1 59-47.9 106.9-106.9 106.9zm0-190c-45.9 0-83.2 37.2-83.2 83.1 0 45.9 37.2 83.2 83.1 83.2 45.9 0 83.2-37.2 83.2-83.1 0-25.8-12-50.1-32.4-65.9-14.4-11.2-32.3-17.3-50.7-17.3z"></path></svg>
+                <h3 class="counter xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">4523</h3>
+                <p class=" text-[0.8rem] font-medium !mb-0">Awards Won</p>
+              </div>
+              <!--/column -->
+            </div>
+            <!--/.row -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]  angled upper-end lower-end relative border-0 before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#fefefe] before:content-[''] before:block before:absolute before:z-0 before:!border-y-transparent before:border-0 before:border-solid before:right-0 after:bottom-[-4rem] after:border-l-transparent after:border-r-[100vw] after:border-b-[4rem] after:border-[#fefefe] after:content-[''] after:block after:absolute after:z-0 after:!border-y-transparent after:border-0 after:border-solid after:right-0">
+      <div class="container pt-32 pb-[4.5rem] xl:pt-36 lg:pt-36 md:pt-36 xl:pb-24 lg:pb-24 md:pb-24">
+        <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center">
+          <div class="md:w-8/12 lg:w-6/12 xl:w-5/12 lg:!ml-0 xl:!ml-[8.33333333%] w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full !relative">
+            <div class="shape bg-dot primary rellax !w-[7rem] !h-[12.5rem] !bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -2rem; left: -1.4rem;"></div>
+            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem] w-full max-w-full !h-auto" src="assets/img/photos/about4.jpg" alt="image"></figure>
+          </div>
+          <!--/column -->
+          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320.8 409.6" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/telemarketer.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !mb-4"><path class="lineal-fill" d="M276.1 367.9v-8.5c0-63.6-52.1-115.7-115.7-115.7s-115.7 52-115.7 115.7v8.5c0 16.6 13.4 30 30 30h171.5c16.5 0 29.9-13.4 29.9-30z"></path><path class="lineal-stroke" d="M246.1 409.6H74.6c-23 0-41.7-18.7-41.7-41.7v-8.5c0-70.4 57.1-127.5 127.5-127.5S287.9 289 287.9 359.4v8.5c-.1 23-18.7 41.7-41.8 41.7zm-85.7-154.2c-57.4.1-103.9 46.6-104 104v8.5c0 10.1 8.2 18.2 18.2 18.2h171.5c10.1 0 18.2-8.2 18.2-18.2v-8.5c0-57.5-46.5-104-103.9-104zm145.5-109.9h-23.5c0-67.4-54.6-122-122-122s-122 54.6-122 122H14.9C14.9 65.3 80.2 0 160.4 0s145.5 65.3 145.5 145.5z"></path><path class="lineal-stroke" d="M160.4 251.3c-57 0-103.2-46.2-103.2-103.2S103.4 44.9 160.4 44.9s103.2 46.2 103.2 103.2c-.1 57-46.3 103.1-103.2 103.2zm0-182.9c-44 0-79.7 35.7-79.7 79.7s35.7 79.7 79.7 79.7 79.7-35.7 79.7-79.7c-.1-44-35.7-79.6-79.7-79.7z"></path><path class="lineal-fill" d="M68.3 130.4c0-5.6-2.9-10.8-7.6-13.8-15-9.4-34.7-4.9-44.1 10.1-3.2 5.1-4.9 11.1-4.9 17.1v21.5c0 17.7 14.4 32 32.1 32.1 6 0 11.8-1.7 16.9-4.9 4.7-3 7.6-8.2 7.6-13.8v-48.3z"></path><path class="lineal-stroke" d="M43.8 209.2C19.6 209.1 0 189.5 0 165.3v-21.5C0 119.6 19.5 100 43.7 100c8.2 0 16.3 2.3 23.3 6.7 8.2 5.1 13.1 14.1 13.1 23.8v48.4c.1 9.7-4.9 18.7-13.1 23.8-6.9 4.2-15 6.5-23.2 6.5zm0-85.8c-11.2 0-20.3 9.1-20.4 20.4v21.5c0 11.2 9.1 20.3 20.4 20.4 3.8 0 7.5-1.1 10.7-3.1 1.3-.9 2.1-2.3 2.1-3.9v-48.3c0-1.6-.8-3-2.1-3.9-3.2-2-6.9-3-10.7-3.1z"></path><path class="lineal-fill" d="M252.4 130.4c0-5.6 2.9-10.8 7.6-13.8 15-9.4 34.7-4.9 44.1 10.1 3.2 5.1 4.9 11.1 4.9 17.1v21.5c0 17.7-14.4 32-32.1 32.1-6 0-11.8-1.7-16.9-4.9-4.7-3-7.6-8.2-7.6-13.8v-48.3z"></path><path class="lineal-stroke" d="M276.9 209.2c-8.2 0-16.2-2.3-23.1-6.6-8.2-5.1-13.2-14.1-13.1-23.8v-48.4c-.1-9.7 4.9-18.7 13.1-23.8 20.5-12.8 47.5-6.6 60.3 13.9 4.4 7 6.7 15.1 6.7 23.3v21.5c0 24.2-19.6 43.8-43.9 43.9zm0-85.8c-3.8 0-7.5 1.1-10.7 3.1-1.3.9-2.1 2.3-2.1 3.9v48.4c0 1.6.8 3 2.1 3.9 9.5 5.9 22.1 3 28-6.5 2-3.2 3.1-7 3.1-10.8v-21.5c0-11.3-9.1-20.4-20.4-20.5z"></path><path class="lineal-stroke" d="M251.2 195.9h-83.3c-6.5 0-11.7-5.2-11.7-11.7s5.2-11.7 11.7-11.7h83.3c6.5 0 11.7 5.3 11.7 11.7 0 6.5-5.3 11.7-11.7 11.7z"></path></svg>
+            <h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-8">Convinced yet? Let's make something great together.</h2>
+            <div class="flex flex-row">
+              <div>
+                <div class="icon !text-[#3f78e0]  xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]"> <i class="uil uil-location-pin-alt before:content-['\ebd8']"></i> </div>
+              </div>
+              <div>
+                <h5 class="!mb-1">Address</h5>
+                <address class=" not-italic !leading-[inherit] !mb-4">Moonshine St. 14/05 Light City, <br class="hidden xl:block lg:block md:block">London, United Kingdom</address>
+              </div>
+            </div>
+            <div class="flex flex-row">
+              <div>
+                <div class="icon !text-[#3f78e0]  xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]"> <i class="uil uil-phone-volume before:content-['\ec50']"></i> </div>
+              </div>
+              <div>
+                <h5 class="!mb-1">Phone</h5>
+                <p>00 (123) 456 78 90</p>
+              </div>
+            </div>
+            <div class="flex flex-row">
+              <div>
+                <div class="icon !text-[#3f78e0]  xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]"> <i class="uil uil-envelope before:content-['\eac8']"></i> </div>
+              </div>
+              <div>
+                <h5 class="!mb-1">E-mail</h5>
+                <p class="!mb-0"><a href="mailto:Trunçgil@email.com" class="!text-[#60697b]">Trunçgil@email.com</a></p>
+              </div>
+            </div>
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="!mt-10"></div>
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/about by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:07 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/about2.html b/public/html/about2.html
new file mode 100644
index 0000000..b4f75bb
--- /dev/null
+++ b/public/html/about2.html
@@ -0,0 +1,1065 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/about2 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:07 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item dropdown language-select uppercase group">
+                <a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
+                <ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
+                </ul>
+              </li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+    </header>
+    <!-- /header -->
+    <section class="wrapper !bg-[#edf2fc]">
+      <div class="container pt-10 pb-40 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-[17.5rem] lg:pb-[17.5rem] md:pb-[17.5rem] !text-center">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-6">
+            <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">About Us</h1>
+            <p class="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">A company turning ideas into beautiful things.</p>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
+        <div class="flex flex-wrap mx-[-15px] !text-center !mb-14 xl:!mb-20 lg:!mb-20 md:!mb-20">
+          <div class="md:w-10/12 lg:w-8/12 xl:w-8/12 w-full md:!ml-[8.33333333%] lg:!ml-[16.66666667%] xl:!ml-[16.66666667%] flex-[0_0_auto] !px-[15px] max-w-full !mt-[-8rem] xl:!mt-[-15rem] lg:!mt-[-15rem] md:!mt-[-15rem]">
+            <figure class="m-0 p-0"><img class="!w-auto" src="assets/img/illustrations/i8.png" alt="image"></figure>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] !mb-10 items-center">
+          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[30px] max-w-full xl:!order-2 lg:!order-2">
+            <ul class="progress-list m-0 p-0 list-none">
+              <li class="!mb-4">
+                <p class="!mb-1">Marketing</p>
+                <div class="progressbar line relative blue" data-value="100"></div>
+              </li>
+              <li class="!mb-4">
+                <p class="!mb-1">Strategy</p>
+                <div class="progressbar line relative yellow" data-value="80"></div>
+              </li>
+              <li class="!mb-4">
+                <p class="!mb-1">Development</p>
+                <div class="progressbar line relative orange" data-value="85"></div>
+              </li>
+              <li class="!mb-4">
+                <p class="!mb-1">Data Analysis</p>
+                <div class="progressbar line relative green" data-value="90"></div>
+              </li>
+            </ul>
+            <!-- /.progress-list -->
+          </div>
+          <!--/column -->
+          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[30px] max-w-full">
+            <h3 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-5">The full service we are offering is specifically designed to meet your business needs and projects.</h3>
+            <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur duis mollis commodo.</p>
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] xl:!mt-0 lg:!mt-0 md:!mt-0 !text-center">
+          <div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] max-w-full max-md:!mt-[30px]">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 362.5" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/megaphone.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] text-[#3f78e0] text-blue !mb-3  m-[0_auto]"><path class="lineal-stroke" d="M343.4 302.9L61 302.5c-25.3-.2-47.5-16.8-54.8-40.9l-3.9-12.9c-7.1-24.2 2.5-50.3 23.5-64.2L262.1 29.8c5.7-3.7 13.3-2.1 17 3.6.7 1 1.2 2.1 1.5 3.2l74.3 249.8c2.4 6.4-.9 13.5-7.3 15.8-1.3.5-2.8.7-4.2.7zM261.8 59.4L39.3 205c-12 7.9-17.4 22.8-13.4 36.6l3.8 12.9c4.2 13.8 16.8 23.3 31.2 23.4l265.8.4-64.9-218.9z"></path><path class="lineal-stroke" d="M138 362.5c-40.4 0-72.8-31.1-73.6-70.8 0-6.8 5.5-12.3 12.3-12.3 6.6 0 12.1 5.2 12.3 11.8.6 26.2 22.1 46.7 49 46.7 14.2 0 27.7-6.2 37-16.9 4.5-5.1 12.2-5.7 17.4-1.2 5.1 4.5 5.7 12.2 1.2 17.4-14 16.1-34.3 25.3-55.6 25.3z"></path><path class="lineal-fill" d="M183.4 96l57.8 194.5 102.1.1-74.5-250.5L183.4 96z"></path><path class="lineal-stroke" d="M343.4 302.9l-102.1-.1c-5.4 0-10.2-3.6-11.8-8.8L171.6 99.5c-1.6-5.2.5-10.8 5.1-13.8l85.4-55.9c5.7-3.7 13.3-2.1 17 3.6.7 1 1.2 2.1 1.5 3.2l74.5 250.6c1.9 6.5-1.8 13.4-8.3 15.3-1.1.2-2.3.4-3.4.4zm-92.9-24.7l76.4.1-65.1-218.9-63.9 41.8 52.6 177z"></path><path class="lineal-stroke" d="M351.8 330.6c-5.4 0-10.2-3.6-11.8-8.8l-91-306c-2.1-6.5 1.3-13.4 7.8-15.6 6.5-2.1 13.4 1.3 15.6 7.8.1.3.2.5.2.8l91 305.9c1.9 6.5-1.8 13.4-8.3 15.3-1.1.4-2.3.6-3.5.6zM338 91.7c-6.8 0-12.3-5.5-12.3-12.3 0-1.8.4-3.6 1.2-5.3l13.4-28.5c2.9-6.2 10.2-8.8 16.4-5.9 6.2 2.9 8.8 10.2 5.9 16.4l-13.4 28.5c-2.1 4.3-6.4 7.1-11.2 7.1zm28.2 64.9c-6.8 0-12.3-5.5-12.3-12.3 0-5.7 3.9-10.6 9.4-12l31.1-7.5c6.6-1.5 13.2 2.6 14.7 9.3 1.5 6.5-2.5 13-9 14.7l-31.2 7.4c-.8.3-1.8.4-2.7.4zm29.1 90c-2.7 0-5.4-.9-7.5-2.6l-24.9-19.4c-5.4-4.2-6.3-11.9-2.2-17.3s11.9-6.3 17.3-2.2l24.9 19.4c5.4 4.2 6.3 11.9 2.1 17.3-2.3 3-5.9 4.7-9.7 4.8z"></path></svg>
+            <h4>Marketing</h4>
+            <p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.</p>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] max-w-full max-md:!mt-[30px]">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !text-[#45c4a0] text-green !mb-3 m-[0_auto]"><circle class="lineal-fill" cx="283.8" cy="283.8" r="143"/><path class="lineal-stroke" d="M283.8 441.8c-87.1 0-158-70.9-158-158s70.9-158 158-158 158 70.9 158 158-70.9 158-158 158zm0-286.1c-70.7 0-128.1 57.3-128.1 128.1S213 411.9 283.8 411.9s128.1-57.3 128.1-128.1c-.1-70.7-57.4-128-128.1-128.1z"/><path class="lineal-fill" d="M283.8 210.5c40.5 0 73.3 32.8 73.3 73.3s-32.8 73.3-73.3 73.3-73.3-32.8-73.3-73.3"/><path class="lineal-stroke" d="M283.8 372.1c-48.7-.1-88.2-39.5-88.2-88.3.2-8.2 7.1-14.8 15.3-14.5 7.9.2 14.3 6.6 14.5 14.5 0 32.2 26.1 58.4 58.4 58.4s58.4-26.1 58.4-58.4-26.1-58.4-58.4-58.4c-8.2-.2-14.8-7.1-14.5-15.3.2-7.9 6.6-14.3 14.5-14.5 48.7-.5 88.7 38.6 89.2 87.3s-38.6 88.7-87.3 89.2h-1.9z"/><path class="lineal-fill" d="M107.9 55.1l-5.3 47.5-47.5 5.3-40.2-40.1 52.9-52.9z"/><path class="lineal-stroke" d="M283.8 55.7c-55.3 0-108.8 20.1-150.4 56.7l-15.2-15.2 4.5-40.4c.5-4.5-1.1-9-4.3-12.2L78.3 4.4c-5.8-5.8-15.3-5.8-21.1 0L4.4 57.2c-5.8 5.8-5.8 15.3 0 21.1l40.1 40.1c2.8 2.8 6.6 4.4 10.6 4.4.5 0 1.1 0 1.6-.1l40.4-4.5 15.2 15.2c-36.6 41.5-56.7 95-56.7 150.4C55.7 409.6 158 512 283.8 512c66.2 0 129.1-28.7 172.4-78.7 5.6-6.1 5.1-15.6-1-21.1s-15.6-5.1-21.1 1l-.5.5c-37.7 43.4-92.3 68.4-149.8 68.4-109.3 0-198.3-89-198.3-198.3 0-47.4 17-93.3 48-129.2l140.2 140.2c5.8 5.8 15.3 5.8 21.1 0s5.8-15.3 0-21.1L154.6 133.5c35.9-31 81.8-48 129.2-48 109.4 0 198.3 89 198.3 198.3 0 8.3 6.7 14.9 14.9 14.9s14.9-6.7 14.9-14.9C512 158 409.6 55.7 283.8 55.7zM36.1 67.8l31.7-31.7 24.5 24.5-3.2 28.5-28.5 3.2-24.5-24.5z"/></svg>
+            <h4>Strategy</h4>
+            <p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.</p>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] max-w-full max-md:!mt-[30px]">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 427.5" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/settings-3.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] text-[#fab758] text-yellow !mb-3  m-[0_auto]"><path class="lineal-fill" d="M186.9 353.4h138.3V413H186.9z"></path><path class="lineal-stroke" d="M460.2 0H51.8C23.2 0 0 23.2 0 51.7v264.4c0 28.6 23.2 51.7 51.8 51.8h120.6v30.7h-28.8c-8 0-14.5 6.5-14.5 14.5s6.5 14.5 14.5 14.5h224.9c8 0 14.5-6.5 14.5-14.5s-6.5-14.5-14.5-14.5h-28.8v-41.9c.3-1.2.4-2.4.4-3.6-.2-8-6.9-14.3-14.8-14.1H51.8C39.2 339 29 328.8 29 316.2V51.7c0-12.6 10.2-22.8 22.8-22.8h408.5c12.6 0 22.8 10.2 22.8 22.8v264.4c0 12.6-10.2 22.8-22.8 22.8h-46.7c-8 .2-14.3 6.9-14.1 14.8.2 8 6.9 14.3 14.8 14.1h45.9c28.6 0 51.7-23.2 51.8-51.7V51.7C512 23.2 488.8 0 460.2 0zM310.7 367.9v30.7H201.3v-30.7h109.4z"></path><path class="lineal-fill" d="M220.1 271.6c-12.7-19.8-6.9-46.3 12.9-59s46.3-6.9 59 12.9c9 14 9 32 0 46.1h100.6v-50.3l-30.4-4.9c-4.9-16.3-13.6-31.3-25.3-43.7l11-28.7-47.3-27.3-19.4 23.8c-16.6-3.9-33.9-3.9-50.5 0l-19.4-23.8-47.2 27.3 11 28.7c-11.7 12.4-20.3 27.4-25.3 43.7l-30.3 4.9v50.3h100.6z"></path><path class="lineal-stroke" d="M392.5 286.1H291.9c-8 0-14.5-6.5-14.5-14.5 0-2.8.8-5.5 2.3-7.8 8.4-13.1 4.6-30.6-8.6-39-13.1-8.4-30.6-4.6-39 8.6-5.9 9.3-5.9 21.1 0 30.4 4.3 6.7 2.4 15.7-4.3 20-2.3 1.5-5.1 2.3-7.8 2.3H119.4c-8 0-14.5-6.5-14.4-14.5v-50.3c0-7.1 5.2-13.1 12.2-14.3l21.8-3.5c4.7-12.2 11.3-23.6 19.5-33.7l-7.9-20.6c-2.5-6.6.1-14.1 6.3-17.7l47.3-27.3c6.2-3.5 14-2.1 18.5 3.4l13.9 17.1c12.9-2 26.1-2 39 0l13.9-17.1c4.5-5.5 12.3-7 18.5-3.4l47.3 27.3c6.2 3.6 8.8 11.1 6.3 17.7l-7.9 20.6c8.2 10.2 14.7 21.5 19.4 33.7l21.8 3.5c7 1.1 12.2 7.2 12.2 14.3v50.3c-.1 8-6.6 14.5-14.6 14.5zm-80-29h65.6v-23.5l-18.2-2.9c-5.5-.9-10-4.8-11.6-10.1-4.3-14.2-11.9-27.2-22-38-3.8-4-5-9.9-3-15.1l6.6-17.2-25.9-15-11.6 14.3c-3.5 4.3-9.1 6.2-14.5 5-14.5-3.3-29.5-3.3-43.9 0-5.4 1.2-11-.7-14.5-5l-11.6-14.3-25.9 15 6.6 17.2c2 5.2.8 11-3 15.1-10.1 10.8-17.7 23.8-22 38-1.6 5.3-6.1 9.2-11.6 10.1l-18.2 2.9v23.5h65.6c-.4-2.8-.6-5.7-.6-8.6.4-31.6 26.3-56.8 57.9-56.4 31 .4 56 25.4 56.4 56.4 0 2.9-.2 5.8-.6 8.6z"></path></svg>
+            <h4>Development</h4>
+            <p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.</p>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] max-w-full max-md:!mt-[30px]">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 431.2" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/bar-chart.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] text-[#f78b77] text-orange !mb-3 m-[0_auto]"><path class="lineal-fill" d="M125.8 121.3h86.6v296.4h-86.6zM299 13.5h86.6v404.2H299z"></path><path class="lineal-stroke" d="M498.5 404.2h-11.8V161.7c0-7.5-6-13.5-13.5-13.5s-13.5 6-13.5 13.5v242.5h-59.6V94.3h73.1c7.4 0 13.5-6 13.5-13.5s-6-13.5-13.5-13.5h-74.1V13.5c0-7.4-6-13.5-13.5-13.5H299c-7.4 0-13.5 6-13.5 13.5v134.8h-59.7v-27c0-7.4-6-13.5-13.5-13.5h-73.6V33.7c0-7.4-6-13.5-13.5-13.5H38.7c-7.4 0-13.5 6-13.5 13.5v294.4c0 7.5 6 13.5 13.5 13.5s13.5-6 13.5-13.5V47.2h59.7v357.1H13.5c-7.4.2-13.3 6.4-13.1 13.8.2 7.2 6 12.9 13.1 13.1h485.1c7.4-.2 13.3-6.4 13.1-13.8-.3-7.2-6-13-13.2-13.2zM139.3 134.7H199v269.5h-59.7V134.7zm86.6 40.5h59.7v229h-59.7v-229zm86.6 229V27h59.7v377.2h-59.7z"></path></svg>
+            <h4>Data Analysis</h4>
+            <p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.</p>
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper  bg-[rgba(246,247,249,1)] ">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-24 lg:!mb-24 md:!mb-24 items-center">
+          <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
+            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i3.png" alt="image"></figure>
+          </div>
+          <!--/column -->
+          <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
+            <h2 class="!text-[.75rem] uppercase text-line relative align-top !pl-[1.4rem] inline-flex !tracking-[0.02rem] !leading-[1.35] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0] !text-[#3f78e0] !mb-3">How It Works?</h2>
+            <h3 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-7 xxl:!pr-5">Everything you need on creating a business process.</h3>
+            <div class="flex flex-row !mb-4">
+              <div>
+               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 321.7 409.6" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/light-bulb.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  text-[#3f78e0] !mr-4"><path class="lineal-fill" d="M160.9 221.3c-19.1 0-37.4-7.3-51.3-20.4l51.3 127.2 51.3-127.2c-13.9 13.1-32.3 20.4-51.3 20.4z"></path><path class="lineal-stroke" d="M160.9 339.9c-4.8 0-9.1-2.9-10.9-7.4L98.6 205.3c-2.5-6 .3-12.9 6.3-15.4 4.3-1.8 9.3-.9 12.7 2.4 24.3 22.9 62.2 22.9 86.5 0 4.7-4.5 12.1-4.3 16.6.3 3.2 3.4 4.2 8.3 2.4 12.7l-51.4 127.2c-1.7 4.5-6 7.4-10.8 7.4zm-27.5-111.3l27.5 68.1 27.5-68.1c-17.9 5.9-37.2 5.9-55 0z"></path><path class="lineal-stroke" d="M86.7 316.1c-5.9 0-10.9-4.4-11.7-10.2-2.2-16.6-9.8-23.9-22.3-36.1l-2.9-2.8C28.8 246.5 0 218.4 0 151.6c0-42.9 17.1-81.9 48-110C77.7 14.8 117.7 0 160.9 0s83.2 14.8 112.8 41.6c6.7 6.1 12.8 12.7 18.3 19.9 3.1 4.1 6 8.3 8.6 12.6 1.3 2.2 2.6 4.4 3.8 6.6 2.4 4.5 4.6 9.1 6.5 13.8 1.4 3.5 2.7 7.2 3.9 10.8 4.7 14.9 7 30.5 7 46.2 0 27.9-4.9 51.2-15 71.2-.6 1.2-1.2 2.4-1.8 3.5-1.8 3.3-3.8 6.5-5.9 9.6-.7 1-1.4 2-2 3-2.6 3.6-5.3 7.1-8.5 10.7-5.6 6.5-11.5 12.2-16.6 17.2-4.7 4.5-12.1 4.4-16.6-.2-4.5-4.7-4.4-12.1.2-16.6 5-4.9 10.2-9.9 15.2-15.7 2.6-3 4.9-6 7.1-9 .6-.8 1.1-1.6 1.7-2.4 1.7-2.5 3.3-5.2 4.7-7.8.5-.9 1-1.9 1.5-2.8 8.4-16.6 12.5-36.4 12.5-60.6 0-13.2-2-26.4-5.9-39.1-1-3.1-2.1-6.1-3.3-9.1-1.6-3.9-3.4-7.8-5.4-11.6-1-1.9-2.1-3.8-3.2-5.6-6.2-10.2-13.8-19.4-22.6-27.3-25.3-22.9-59.8-35.5-97-35.5S89.1 36.1 63.8 59c-26 23.5-40.3 56.4-40.3 92.5 0 56.9 22.7 79.1 42.8 98.6l2.8 2.7c13.4 13 26.1 25.2 29.3 49.9.9 6.4-3.7 12.4-10.1 13.2-.6.2-1.1.2-1.6.2z"></path><path class="lineal-fill" d="M141.9 397.8h38c3.8 0 7.4-1.5 10.1-4.2l13-13c2-2 3.4-4.6 3.9-7.4l12.4-63.7h-117l12.4 63.7c.6 2.8 2 5.4 4 7.4l13 13c2.7 2.7 6.3 4.2 10.2 4.2z"></path><path class="lineal-stroke" d="M179.8 409.6h-37.9c-6.9 0-13.6-2.7-18.5-7.7l-13-13c-3.7-3.7-6.2-8.4-7.2-13.5l-12.4-63.7c-1.2-6.4 2.9-12.5 9.3-13.8.7-.1 1.5-.2 2.2-.2h117c6.5 0 11.8 5.3 11.8 11.8 0 .8-.1 1.5-.2 2.2l-12.4 63.7c-1 5.1-3.5 9.8-7.2 13.5l-13 13c-4.8 4.9-11.5 7.7-18.5 7.7zm-63.2-88.4l9.7 49.7c.1.5.4 1 .7 1.4l13 13c.5.5 1.2.8 1.9.8h38c.7 0 1.4-.3 1.9-.8l13-13c.4-.4.6-.9.7-1.4l9.6-49.7h-88.5z"></path><path class="lineal-stroke" d="M241.5 321H80.2c-6.5-.2-11.6-5.6-11.4-12.1.2-6.2 5.2-11.2 11.4-11.4h161.4c6.5-.2 11.9 4.9 12.1 11.4.2 6.5-4.9 11.9-11.4 12.1h-.8zm-14.8 44.3H95c-6.5-.2-11.6-5.6-11.4-12.1.2-6.2 5.2-11.2 11.4-11.4h131.7c6.5.2 11.6 5.6 11.4 12.1-.2 6.2-5.2 11.2-11.4 11.4z"></path></svg>
+              </div>
+              <div>
+                <h4 class="!mb-1">Collect Ideas</h4>
+                <p class="!mb-1">Nulla vitae elit libero pharetra augue dapibus.</p>
+              </div>
+            </div>
+            <div class="flex flex-row !mb-4">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 408.1 409.6" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/pie-chart-2.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  text-[#45c4a0] text-green !mr-4"><path class="lineal-stroke" d="M396.3 192.3h-33.4c-6.4 0-11.6-5.2-11.6-11.6 0-6.4 5.2-11.6 11.6-11.6h19.7C363.2 71.1 268.1 7.3 170.1 26.6c-4.2.8-8.4 1.8-12.6 2.9L235.1 169h72c6.4 0 11.6 5.2 11.6 11.6 0 6.4-5.2 11.6-11.6 11.6h-78.9c-4.2 0-8.1-2.3-10.1-6l-87.9-158c-3.1-5.6-1.1-12.6 4.5-15.7.7-.4 1.5-.7 2.3-1l8.1-2.5c107.8-33.1 222 27.4 255.1 135.2 2.7 8.7 4.8 17.6 6.3 26.6l1.3 8c1.1 6.3-3.2 12.3-9.5 13.3-.7.2-1.3.2-2 .2zM204.6 409.6c-20.4-.1-40.6-3.2-60.1-9.2l-8.1-2.5c-6.1-1.9-9.6-8.4-7.7-14.5.2-.8.6-1.5 1-2.2l88.4-158.3c2.1-3.7 5.9-5.9 10.1-5.9h33.2c6.4.2 11.4 5.5 11.2 11.9-.2 6.1-5.1 11.1-11.2 11.2H235l-78 139.8c96.8 26.3 196.6-30.9 222.9-127.8 1.1-4 2-8 2.8-12h-65.4c-6.4.2-11.7-4.8-11.9-11.2-.2-6.4 4.8-11.7 11.2-11.9h79.8c6.4 0 11.6 5.2 11.6 11.6 0 .6-.1 1.3-.2 1.9l-1.3 7.9C390 337 304.7 409.4 204.6 409.6z"></path><path class="lineal-fill" d="M93 361.8C6 300.1-14.5 179.6 47.1 92.6c12.7-17.9 28.4-33.5 46.3-46.2l6.2-4.4 90 161.7-90.4 162.5-6.2-4.4z"></path><path class="lineal-stroke" d="M99.2 377.8c-2.4 0-4.7-.7-6.7-2.1l-6.2-4.4C-5.9 305.9-27.7 178.2 37.7 86c13.5-19 30-35.5 49.1-48.9l6.2-4.4c5.2-3.7 12.4-2.4 16.1 2.8.2.3.5.7.7 1.1l90 161.7c1.9 3.5 1.9 7.8 0 11.3L109.4 372c-1.6 2.9-4.3 4.9-7.6 5.7-.8 0-1.7.1-2.6.1zM95.8 59C15.6 119.1-.7 232.9 59.4 313.1c10.2 13.7 22.4 25.8 36 36.1l81-145.4L95.8 59z"></path></svg>
+              </div>
+              <div>
+                <h4 class="!mb-1">Data Analysis</h4>
+                <p class="!mb-1">Vivamus sagittis lacus augue laoreet vel.</p>
+              </div>
+            </div>
+            <div class="flex flex-row">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 332.7" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/design.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  text-[#fab758] text-yellow !mr-4"><path class="lineal-stroke" d="M350.9 54.2H58.7c-6.2.2-11.4-4.7-11.5-10.9S51.8 31.9 58 31.7h292.9c6.2-.2 11.4 4.7 11.5 10.9s-4.7 11.4-10.9 11.5c-.2.1-.4.1-.6.1zM239.8 328.9a11.182 11.182 0 01-10.6-14.8c2.8-8.3 16.2-47.4 25.6-63.6-9.5-10.1-37-40.3-49.9-66.1-12.1 23.4-39.5 54.4-50.1 66 10.1 16.5 22.7 54.9 25.4 63.6.4 1.2.6 2.4.6 3.7 0 6.2-5 11.2-11.2 11.2-4.9 0-9.3-3.2-10.7-7.9v-.1c-6.6-20.7-18.4-52.9-24.3-60.3-4.8-6.1-3.4-14.5-.8-19.8.5-.9 1.1-1.8 1.8-2.6 20.6-22.3 50.7-59.4 52.7-72.4.6-3.7 3.3-10.1 14.8-10.7 12.5-.7 16.6 4.8 17.8 9.4 5.7 21.5 40 60.3 52.7 73.4.8.8 1.5 1.8 2 2.8 2.6 5.1 4 13.3-.5 19.5-5.7 7.7-18.2 41.6-24.8 61.1-1.3 4.6-5.6 7.7-10.5 7.6z"></path><path class="lineal-stroke" d="M204.8 254.9c-6.2 0-11.2-5-11.2-11.2V167c.3-6.2 5.6-10.9 11.8-10.6 5.7.3 10.3 4.9 10.6 10.6v76.7c0 6.2-5 11.2-11.2 11.2z"></path><path class="lineal-stroke" d="M366.6 244.6c-6.2 0-11.2-5-11.2-11.2v-28.6c0-83.1-67.6-150.6-150.6-150.6S54.2 121.7 54.2 204.8v28.6c-.2 6.2-5.4 11.1-11.5 10.9-5.9-.2-10.7-4.9-10.9-10.9v-28.6c-.1-95.5 77.2-172.9 172.7-173 46 0 90.1 18.2 122.6 50.8 32.6 32.3 50.9 76.3 50.9 122.2v28.6c-.1 6.2-5.2 11.2-11.4 11.2z"></path><path class="lineal-fill" d="M220 74.7h-30.4c-9.1 0-16.5-7.4-16.5-16.5V27.7c0-9.1 7.4-16.5 16.5-16.5H220c9.1 0 16.5 7.4 16.5 16.5v30.5c0 9.1-7.4 16.5-16.5 16.5z"></path><path class="lineal-stroke" d="M220 85.9h-30.4c-15.3 0-27.7-12.4-27.7-27.7V27.7c0-15.3 12.4-27.7 27.7-27.7H220c15.3 0 27.7 12.4 27.7 27.7v30.5c0 15.3-12.4 27.7-27.7 27.7zm-30.4-63.5c-2.9 0-5.3 2.4-5.3 5.3v30.5c0 2.9 2.4 5.3 5.3 5.3H220c2.9 0 5.3-2.4 5.3-5.3V27.7c0-2.9-2.4-5.3-5.3-5.3h-30.4z"></path><path class="lineal-fill" d="M381.9 275.4h-30.5c-9.1 0-16.5-7.4-16.5-16.5v-30.5c0-9.1 7.4-16.5 16.5-16.5h30.5c9.1 0 16.5 7.4 16.5 16.5v30.5c0 9.1-7.4 16.5-16.5 16.5z"></path><path class="lineal-stroke" d="M381.9 286.6h-30.5c-15.3 0-27.7-12.4-27.7-27.7v-30.5c0-15.3 12.4-27.7 27.7-27.7h30.5c15.3 0 27.7 12.4 27.7 27.7v30.5c0 15.3-12.4 27.7-27.7 27.7zm-30.5-63.4c-2.9 0-5.3 2.4-5.3 5.3V259c0 2.9 2.4 5.3 5.3 5.3h30.5c2.9 0 5.3-2.4 5.3-5.3v-30.5c0-2.9-2.4-5.3-5.3-5.3h-30.5z"></path><path class="lineal-fill" d="M58.2 275.4H27.7c-9.1 0-16.5-7.4-16.5-16.5v-30.5c0-9.1 7.4-16.5 16.5-16.5h30.5c9.1 0 16.5 7.4 16.5 16.5V259c0 9.1-7.4 16.5-16.5 16.4z"></path><path class="lineal-stroke" d="M58.2 286.6H27.7C12.4 286.6 0 274.2 0 258.9v-30.5c0-15.3 12.4-27.7 27.7-27.7h30.5c15.3 0 27.7 12.4 27.7 27.7v30.5c0 15.3-12.4 27.7-27.7 27.7zm-30.5-63.4c-2.9 0-5.3 2.4-5.3 5.3V259c0 2.9 2.4 5.3 5.3 5.3h30.5c2.9 0 5.3-2.4 5.3-5.3v-30.5c0-2.9-2.4-5.3-5.3-5.3H27.7zm234.1 109.5h-114c-6.2 0-11.2-5-11.2-11.2 0-6.2 5-11.2 11.2-11.2h114c6.2 0 11.2 5 11.2 11.2 0 6.2-5 11.2-11.2 11.2z"></path></svg>
+              </div>
+              <div>
+                <h4 class="!mb-1">Magic Touch</h4>
+                <p class="!mb-0">Cras mattis consectetur purus sit amet.</p>
+              </div>
+            </div>
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
+          <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
+            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i2.png" alt="image"></figure>
+          </div>
+          <!--/column -->
+          <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
+            <h2 class="!text-[.75rem] uppercase text-line relative align-top !pl-[1.4rem] inline-flex !tracking-[0.02rem] !leading-[1.35] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0] !text-[#3f78e0] !mb-3">Why Choose Us?</h2>
+            <h3 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-7">A few reasons why our valued customers choose us.</h3>
+            <div class="accordion accordion-wrapper" id="accordionExample">
+              <div class="card plain accordion-item">
+                <div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingOne">
+                  <button class="accordion-button !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Professional Design </button>
+                </div>
+                <!--/.card-header -->
+                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+                  <div class="card-body !p-[0_0_0_1.1rem]">
+                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
+                  </div>
+                  <!--/.card-body -->
+                </div>
+                <!--/.accordion-collapse -->
+              </div>
+              <!--/.accordion-item -->
+              <div class="card plain accordion-item">
+                <div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingTwo">
+                  <button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Top-Notch Support </button>
+                </div>
+                <!--/.card-header -->
+                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+                  <div class="card-body !p-[0_0_0_1.1rem]">
+                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
+                  </div>
+                  <!--/.card-body -->
+                </div>
+                <!--/.accordion-collapse -->
+              </div>
+              <!--/.accordion-item -->
+              <div class="card plain accordion-item">
+                <div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingThree">
+                  <button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Header and Slider Options </button>
+                </div>
+                <!--/.card-header -->
+                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                  <div class="card-body !p-[0_0_0_1.1rem]">
+                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
+                  </div>
+                  <!--/.card-body -->
+                </div>
+                <!--/.accordion-collapse -->
+              </div>
+              <!--/.accordion-item -->
+            </div>
+            <!--/.accordion -->
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
+          <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
+            <h2 class="!text-[.75rem] uppercase text-line relative align-top !pl-[1.4rem] inline-flex !tracking-[0.02rem] !leading-[1.35] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0] !text-[#3f78e0] !mb-3">Meet the Team</h2>
+            <h3 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-5">Save your time and money by choosing our professional team.</h3>
+            <p>Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros tempus porttitor.</p>
+            <a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mt-3 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See All Members</a>
+          </div>
+          <!--/column -->
+          <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
+            <div class="swiper-container !text-center !mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
+              <div class="swiper">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t1.jpg" alt="image">
+                    <h4 class="!mb-1">Cory Zamora</h4>
+                    <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Marketing Specialist</div>
+                    <p class="!mb-2">Etiam porta sem magna malesuada mollis.</p>
+                    <nav class="nav social justify-center !text-center  !mb-0">
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-slack before:content-['\ecdd'] text-[1rem] !text-[#d4135c]"></i></a>
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-linkedin before:content-['\ebd1'] text-[1rem] !text-[#3393c1]"></i></a>
+                    </nav>
+                    <!-- /.social -->
+                  </div>
+                  <!--/.swiper-slide -->
+                  <div class="swiper-slide">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t2.jpg" alt="image">
+                    <h4 class="!mb-1">Coriss Ambady</h4>
+                    <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Financial Analyst</div>
+                    <p class="!mb-2">Aenean eu leo quam. Pellentesque ornare lacinia.</p>
+                    <nav class="nav social justify-center !text-center  !mb-0">
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] !text-[#c8312b]"></i></a>
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
+                    </nav>
+                    <!-- /.social -->
+                  </div>
+                  <!--/.swiper-slide -->
+                  <div class="swiper-slide">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t3.jpg" alt="image">
+                    <h4 class="!mb-1">Nikolas Brooten</h4>
+                    <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Sales Manager</div>
+                    <p class="!mb-2">Donec ornare elit quam porta gravida at eget.</p>
+                    <nav class="nav social justify-center !text-center  !mb-0">
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-linkedin before:content-['\ebd1'] text-[1rem] !text-[#3393c1]"></i></a>
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-tumblr-square before:content-['\ed54'] text-[1rem] !text-[#5d82a4]"></i></a>
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                    </nav>
+                    <!-- /.social -->
+                  </div>
+                  <!--/.swiper-slide -->
+                  <div class="swiper-slide">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t4.jpg" alt="image">
+                    <h4 class="!mb-1">Jackie Sanders</h4>
+                    <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Investment Planner</div>
+                    <p class="!mb-2">Nullam risus eget urna mollis ornare vel eu leo.</p>
+                    <nav class="nav social justify-center !text-center  !mb-0">
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
+                    </nav>
+                    <!-- /.social -->
+                  </div>
+                  <!--/.swiper-slide -->
+                  <div class="swiper-slide">
+                    <img class="rounded-[50%] w-40 !mx-auto !mb-4" src="assets/img/avatars/t5.jpg" alt="image">
+                    <h4 class="!mb-1">Tina Geller</h4>
+                    <div class="!text-[0.65rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Assistant Buyer</div>
+                    <p class="!mb-2">Vivamus sagittis lacus vel augue laoreet rutrum.</p>
+                    <nav class="nav social justify-center !text-center  !mb-0">
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-slack before:content-['\ecdd'] text-[1rem] !text-[#d4135c]"></i></a>
+                      <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
+                    </nav>
+                    <!-- /.social -->
+                  </div>
+                  <!--/.swiper-slide -->
+                </div>
+                <!--/.swiper-wrapper -->
+              </div>
+              <!-- /.swiper -->
+            </div>
+            <!-- /.swiper-container -->
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper  bg-[rgba(246,247,249,1)] ">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] !mb-20 items-center">
+          <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[70px] max-w-full xl:!order-2 lg:!order-2">
+            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i4.png" alt="image"></figure>
+          </div>
+          <!--/column -->
+          <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[70px] max-w-full xl:!mt-[4.5rem] lg:!mt-[4.5rem]">
+            <div class="swiper-container dots-closer !mb-6" data-margin="30" data-dots="true">
+              <div class="swiper">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide">
+                    <blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
+                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
+                      <div class="flex items-center justify-center !text-center">
+                        <div class="info !pl-0">
+                          <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
+                          <p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
+                        </div>
+                      </div>
+                    </blockquote>
+                  </div>
+                  <!--/.swiper-slide -->
+                  <div class="swiper-slide">
+                    <blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
+                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
+                      <div class="flex items-center justify-center !text-center">
+                        <div class="info !pl-0">
+                          <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
+                          <p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
+                        </div>
+                      </div>
+                    </blockquote>
+                  </div>
+                  <!--/.swiper-slide -->
+                  <div class="swiper-slide">
+                    <blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
+                      <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
+                      <div class="flex items-center justify-center !text-center">
+                        <div class="info !pl-0">
+                          <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
+                          <p class="!mb-0 text-[0.8rem]">Sales Manager</p>
+                        </div>
+                      </div>
+                    </blockquote>
+                  </div>
+                  <!--/.swiper-slide -->
+                </div>
+                <!--/.swiper-wrapper -->
+              </div>
+              <!-- /.swiper -->
+            </div>
+            <!-- /.swiper-container -->
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+        <div class="xl:!px-5 lg:!px-5">
+          <div class="flex flex-wrap mx-0 md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-40px] items-center">
+            <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c1.png" alt="image"></figure>
+            </div>
+            <!--/column -->
+            <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c2.png" alt="image"></figure>
+            </div>
+            <!--/column -->
+            <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c3.png" alt="image"></figure>
+            </div>
+            <!--/column -->
+            <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c4.png" alt="image"></figure>
+            </div>
+            <!--/column -->
+            <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c5.png" alt="image"></figure>
+            </div>
+            <!--/column -->
+            <div class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
+              <figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="assets/img/brands/c6.png" alt="image"></figure>
+            </div>
+            <!--/column -->
+          </div>
+          <!--/.row -->
+        </div>
+        <!-- /div -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
+          <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
+            <figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/i5.png" alt="image"></figure>
+          </div>
+          <!--/column -->
+          <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
+            <h2 class="!text-[.75rem] uppercase text-line relative align-top !pl-[1.4rem] inline-flex !tracking-[0.02rem] !leading-[1.35] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0] !text-[#3f78e0] !mb-3">Get In Touch</h2>
+            <h3 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-7">Got any questions? Don't hesitate to get in touch.</h3>
+            <div class="flex flex-row">
+              <div>
+                <div class="icon !text-[#3f78e0] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-location-pin-alt before:content-['\ebd8']"></i> </div>
+              </div>
+              <div>
+                <h5 class="!mb-1">Address</h5>
+                <address class=" not-italic !leading-[inherit] !mb-4">Moonshine St. 14/05 Light City, London</address>
+              </div>
+            </div>
+            <div class="flex flex-row">
+              <div>
+                <div class="icon !text-[#3f78e0] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-phone-volume before:content-['\ec50']"></i> </div>
+              </div>
+              <div>
+                <h5 class="!mb-1">Phone</h5>
+                <p>00 (123) 456 78 90</p>
+              </div>
+            </div>
+            <div class="flex flex-row">
+              <div>
+                <div class="icon !text-[#3f78e0] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-envelope before:content-['\eac8']"></i> </div>
+              </div>
+              <div>
+                <h5 class="!mb-1">E-mail</h5>
+                <p class="!mb-0"><a href="mailto:Trunçgil@email.com" class="!text-[#60697b]">Trunçgil@email.com</a></p>
+              </div>
+            </div>
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/about2 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:08 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/blog-post.html b/public/html/blog-post.html
new file mode 100644
index 0000000..84862a0
--- /dev/null
+++ b/public/html/blog-post.html
@@ -0,0 +1,1050 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog-post by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:09 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <nav class="navbar navbar-expand-lg center-nav navbar-light transparent xl:pt-[6px] lg:pt-[6px]">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search before:content-['\eca5'] !text-[1.1rem]"></i></a></li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+      <div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
+        <div class="container flex !flex-row py-6">
+          <form class="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[1rem] before:!text-[#343f52] before:z-[1] before:right-auto before:top-2/4 before:font-Unicons w-full before:left-0 focus:!outline-offset-0  ">
+            <input id="search-form1" type="text" class="form-control text-[0.8rem] !shadow-none !pl-[1.75rem] !pr-[.75rem] border-0 bg-inherit m-0 block w-full font-medium !leading-[1.7] !text-[#60697b] px-4 py-[0.6rem] rounded-[0.4rem] focus:!outline-offset-0  " placeholder="Type keyword and hit enter">
+          </form> 
+          <button type="button" class="btn-close leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out p-0 border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]  " data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <!-- /.container -->
+      </div>
+      <!-- /.offcanvas -->
+    </header>
+    <!-- /header -->
+    <section class="wrapper !bg-[#edf2fc]">
+      <div class="container pt-10 pb-36 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-40 lg:pb-40 md:pb-40 !text-center">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="md:w-10/12 lg:w-10/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <div class="post-header !mb-[.9rem]">
+              <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] !mb-[0.4rem]  text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                <a href="#" class="hover" rel="category">Teamwork</a>
+              </div>
+              <!-- /.post-category -->
+              <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4">Commodo Dolor Bibendum Parturient Cursus Mollis</h1>
+              <ul class="!text-[0.8rem] !text-[#aab0bc] m-0 p-0 list-none !mb-5">
+                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>5 Jul 2022</span></li>
+                <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[0.8rem] !text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[0.8rem] !text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3<span> Comments</span></a></li>
+                <li class="post-likes inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[0.8rem] !text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3<span> Likes</span></a></li>
+              </ul>
+              <!-- /.post-meta -->
+            </div>
+            <!-- /.post-header -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <div class="blog single !mt-[-7rem]">
+              <div class="card">
+                <figure class="card-img-top"><img src="assets/img/photos/b1.jpg" alt="image"></figure>
+                <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
+                  <div class="classic-view">
+                    <article class="post !mb-8">
+                      <div class="relative !mb-5">
+                        <h2 class="h1 !mb-4 !leading-[1.3]">Cras mattis consectetur purus fermentum</h2>
+                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum.</p>
+                        <p>Donec sed odio dui consectetur adipiscing elit. Etiam adipiscing tincidunt elit, eu convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero, condimentum ac laoreet vitae, varius tempor nisi. Duis non arcu vel lectus urna mollis ornare vel eu leo.</p>
+                        <div class="flex flex-wrap mx-[-15px] !mt-3 !mb-10">
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b8-full.jpg" data-glightbox="title: Heading; description: Purus Vulputate Sem Tellus Quam" data-gallery="post"> <img src="assets/img/photos/b8.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b9-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b9.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b10-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b10.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b11-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b11.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                        </div>
+                        <!-- /.row -->
+                        <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna.</p>
+                        <blockquote class="border-l-[#3f78e0] !leading-[1.7] font-medium !pl-4 border-l-[0.15rem] border-solid !text-[1rem] !my-8">
+                          <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula lacinia odio sem nec elit purus.</p>
+                          <footer class="!text-[0.6rem] !text-[#aab0bc] !mb-4 before:content-['\2014\a0'] font-bold uppercase !tracking-[0.02rem] !mt-0">Very important person</footer>
+                        </blockquote>
+                        <h3 class="h2 !mb-4">Sit Vulputate Bibendum Purus</h3>
+                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
+                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
+                      </div>
+                      <!-- /.post-content -->
+                      <div class="post-footer xl:!flex xl:!flex-row xl:!justify-between lg:!flex lg:!flex-row lg:!justify-between md:!flex md:!flex-row md:!justify-between !items-center !mt-8">
+                        <div>
+                          <ul class="pl-0 list-none tag-list  !mb-0">
+<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Still Life</a></li>
+<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Urban</a></li>
+<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Nature</a></li>
+                          </ul>
+                        </div>
+                        <div class="!mb-0 xl:!mb-2 lg:!mb-2 md:!mb-2">
+                          <div class="dropdown share-dropdown btn-group">
+                            <button class="btn btn-sm btn-red !text-white !bg-[#e2626b] border-[#e2626b] hover:text-white hover:bg-[#e2626b] hover:!border-[#e2626b]   active:text-white active:bg-[#e2626b] active:border-[#e2626b] disabled:text-white disabled:bg-[#e2626b] disabled:border-[#e2626b] !rounded-[50rem] btn-icon btn-icon-start dropdown-toggle !mb-0 !mr-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                              <i class="uil uil-share-alt !mr-[0.3rem] text-[0.8rem] before:content-['\ecb0']"></i> Share </button>
+                            <div class="dropdown-menu !shadow-[rgba(30,34,40,0.06)_0px_0px_25px_0px]">
+    <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="#"><i class="uil uil-twitter w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ed59']"></i>Twitter</a>
+    <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="#"><i class="uil uil-facebook-f w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\eae2']"></i>Facebook</a>
+    <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="#"><i class="uil uil-linkedin w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ebd1']"></i>Linkedin</a>
+                            </div>
+                            <!--/.dropdown-menu -->
+                          </div>
+                          <!--/.share-dropdown -->
+                        </div>
+                      </div>
+                      <!-- /.post-footer -->
+                    </article>
+                    <!-- /.post -->
+                  </div>
+                  <!-- /.classic-view -->
+                  <hr>
+                  <div class="author-info xl:!flex lg:!flex md:!flex items-center !mb-3">
+                    <div class="flex items-center">
+                      <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u5.jpg"></figure>
+                      <div>
+                        <h6><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
+                        <span class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none">Sales Manager</span>
+                      </div>
+                    </div>
+                    <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                      <a href="#" class="btn btn-sm btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-file-alt !mr-[0.3rem] before:content-['\eaec'] text-[.8rem]"></i> All Posts</a>
+                    </div>
+                  </div>
+                  <!-- /.author-info -->
+                  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac. Maecenas faucibus mollis interdum.</p>
+                 
+              <nav class="nav social">
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#e94d88] before:content-['\eaa2'] uil uil-dribbble"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube"></i></a>
+              </nav>
+                  <!-- /.social -->
+                  <hr>
+                  <h3 class="!mb-6">You Might Also Like</h3>
+                  <div class="swiper-container blog grid-view !mb-24 relative z-10" data-margin="30" data-dots="true" data-items-md="2" data-items-xs="1">
+                    <div class="swiper">
+                      <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                          <article>
+                        <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                          <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                            <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                          </figcaption>
+                        </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Coding</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ligula tristique quis risus</a></h2>
+                            </div>
+                            <!-- /.post-header -->
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>4</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                        <div class="swiper-slide">
+                          <article>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                                <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                              </figcaption>
+                            </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Workspace</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Nullam id dolor elit id nibh</a></h2>
+                            </div>
+                            <!-- /.post-header -->
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                        <div class="swiper-slide">
+                          <article>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                                <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                              </figcaption>
+                            </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Meeting</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ultricies fusce porta elit</a></h2>
+                            </div>
+                            <!-- /.post-header -->
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Feb 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                        <div class="swiper-slide">
+                          <article>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                                <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                              </figcaption>
+                            </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Business Tips</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Morbi leo risus porta eget</a></h2>
+                            </div>
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7 Jan 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>2</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                      </div>
+                      <!--/.swiper-wrapper -->
+                    </div>
+                    <!-- /.swiper -->
+                  </div>
+                  <!-- /.swiper-container -->
+                  <hr>
+                  <div id="comments" class="relative !m-0">
+                    <h3 class="!mb-6">5 Comments</h3>
+                    <ol id="singlecomments" class="commentlist m-0 p-0 list-none">
+                      <li class="comment !mt-8">
+                        <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                          <div class="flex items-center">
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u1.jpg"></figure>
+                            <div>
+                              <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Connor Gibson</a></h6>
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>14 Jan 2022</li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /div -->
+                          </div>
+                          <!-- /div -->
+                          <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                            <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                          </div>
+                          <!-- /div -->
+                        </div>
+                        <!-- /.comment-header -->
+                        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis integer posuere erat ante.</p>
+                      </li>
+                      <li class="comment !mt-8">
+                        <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                          <div class="flex items-center">
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                            <div>
+                              <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>21 Feb 2022</li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /div -->
+                          </div>
+                          <!-- /div -->
+                          <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                            <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                          </div>
+                          <!-- /div -->
+                        </div>
+                        <!-- /.comment-header -->
+                        <p>Quisque tristique tincidunt metus non aliquam. Quisque ac risus sit amet quam sollicitudin vestibulum vitae malesuada libero. Mauris magna elit, suscipit non ornare et, blandit a tellus. Pellentesque dignissim ornare faucibus mollis.</p>
+                        <ul class="children">
+                          <li class="comment !mt-8">
+                            <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                              <div class="flex items-center">
+                                <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u3.jpg"></figure>
+                                <div>
+                                  <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Pearce Frye</a></h6>
+                                  <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                    <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>22 Feb 2022</li>
+                                  </ul>
+                                  <!-- /.post-meta -->
+                                </div>
+                                <!-- /div -->
+                              </div>
+                              <!-- /div -->
+                              <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                                <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                              </div>
+                              <!-- /div -->
+                            </div>
+                            <!-- /.comment-header -->
+                            <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis.</p>
+                            <ul class="children">
+                              <li class="comment !mt-8">
+                                <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                                  <div class="flex items-center">
+                                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                                    <div>
+                                      <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
+                                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                        <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>4 Apr 2022</li>
+                                      </ul>
+                                      <!-- /.post-meta -->
+                                    </div>
+                                    <!-- /div -->
+                                  </div>
+                                  <!-- /div -->
+                                  <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                                    <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                                  </div>
+                                  <!-- /div -->
+                                </div>
+                                <!-- /.comment-header -->
+                                <p>Nullam id dolor id nibh ultricies vehicula ut id. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia aenean bibendum nulla consectetur.</p>
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="comment !mt-8">
+                        <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                          <div class="flex items-center">
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u4.jpg"></figure>
+                            <div>
+                              <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Lou Bloxham</a></h6>
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>3 May 2022</li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /div -->
+                          </div>
+                          <!-- /div -->
+                          <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                            <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                          </div>
+                          <!-- /div -->
+                        </div>
+                        <!-- /.comment-header -->
+                        <p>Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+                      </li>
+                    </ol>
+                  </div>
+                  <!-- /#comments -->
+                  <hr>
+                  <h3 class="!mb-3">Would you like to share your thoughts?</h3>
+                  <p class="!mb-7">Your email address will not be published. Required fields are marked *</p>
+                  <form class="comment-form">
+                    <div class="form-floating relative !mb-4">
+                      <input type="text" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-name">
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-name">Name *</label>
+                    </div>
+                    <div class="form-floating relative !mb-4">
+                      <input type="email" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-email">
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-email">Email*</label>
+                    </div>
+                    <div class="form-floating relative !mb-4">
+                      <input type="text" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-web">
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-web">Website</label>
+                    </div>
+                    <div class="form-floating relative !mb-4">
+                      <textarea name="textarea" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" style="height: 150px"></textarea>
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Comment *</label>
+                    </div>
+                    <button type="submit" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Submit</button>
+                  </form>
+                  <!-- /.comment-form -->
+                </div>
+                <!-- /.card-body -->
+              </div>
+              <!-- /.card -->
+            </div>
+            <!-- /.blog -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:#">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog-post by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:14 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/blog-post2.html b/public/html/blog-post2.html
new file mode 100644
index 0000000..25c96d4
--- /dev/null
+++ b/public/html/blog-post2.html
@@ -0,0 +1,1153 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog-post2 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:14 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <nav class="navbar navbar-expand-lg center-nav navbar-dark transparent position-absolute xl:pt-[6px] lg:pt-[6px]">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
+              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search before:content-['\eca5'] !text-[1.1rem]"></i></a></li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-white !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+      <div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
+        <div class="container flex !flex-row py-6">
+          <form class="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[1rem] before:!text-[#343f52] before:z-[1] before:right-auto before:top-2/4 before:font-Unicons w-full before:left-0 focus:!outline-offset-0  ">
+            <input id="search-form1" type="text" class="form-control text-[0.8rem] !shadow-none !pl-[1.75rem] !pr-[.75rem] border-0 bg-inherit m-0 block w-full font-medium !leading-[1.7] !text-[#60697b] px-4 py-[0.6rem] rounded-[0.4rem] focus:!outline-offset-0  " placeholder="Type keyword and hit enter">
+          </form> 
+          <button type="button" class="btn-close leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out p-0 border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]  " data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <!-- /.container -->
+      </div>
+      <!-- /.offcanvas -->
+    </header>
+    <!-- /header -->
+    <section class="wrapper image-wrapper bg-image bg-overlay !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="assets/img/photos/bg5.jpg">
+      <div class="container pt-32 pb-20 xl:pt-40 lg:pt-40 md:pt-40 xl:pb-36 lg:pb-36 md:pb-36 !text-center">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="md:w-10/12 lg:w-10/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <div class="post-header !mb-[.9rem]">
+              <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-white !mb-[0.4rem]  text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#ffffff]">
+                <a href="#" class="!text-inherit opacity-100" rel="category">Teamwork</a>
+              </div>
+              <!-- /.post-category -->
+              <h1 class="!text-white !text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4">Commodo Dolor Bibendum Parturient Cursus Mollis</h1>
+              <ul class="!text-[0.8rem] !text-white m-0 p-0 list-none">
+                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>5 Jul 2022</span></li>
+                <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#ffffff]"><a class="!text-[0.8rem] !text-white hover:text-white" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#ffffff]"><a class="!text-[0.8rem] !text-white hover:text-white" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3<span> Comments</span></a></li>
+                <li class="post-likes inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#ffffff]"><a class="!text-[0.8rem] !text-white hover:text-white" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3<span> Likes</span></a></li>
+              </ul>
+              <!-- /.post-meta -->
+            </div>
+            <!-- /.post-header -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px]">
+          <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
+            <div class="blog single">
+              <div class="card">
+                <figure class="card-img-top"><img src="assets/img/photos/b1.jpg" alt="image"></figure>
+                <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
+                  <div class="classic-view">
+                    <article class="post !mb-8">
+                      <div class="relative !mb-5">
+                        <h2 class="h1 !mb-4 !leading-[1.3]">Cras mattis consectetur purus fermentum</h2>
+                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum.</p>
+                        <p>Donec sed odio dui consectetur adipiscing elit. Etiam adipiscing tincidunt elit, eu convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero, condimentum ac laoreet vitae, varius tempor nisi. Duis non arcu vel lectus urna mollis ornare vel eu leo.</p>
+                        <div class="flex flex-wrap mx-[-15px] !mt-3 !mb-10">
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b8-full.jpg" data-glightbox="title: Heading; description: Purus Vulputate Sem Tellus Quam" data-gallery="post"> <img src="assets/img/photos/b8.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b9-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b9.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b10-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b10.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b11-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b11.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                        </div>
+                        <!-- /.row -->
+                        <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna.</p>
+                        <blockquote class="border-l-[#3f78e0] !leading-[1.7] font-medium !pl-4 border-l-[0.15rem] border-solid !text-[1rem] !my-8">
+                          <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula lacinia odio sem nec elit purus.</p>
+                          <footer class="!text-[0.6rem] !text-[#aab0bc] !mb-4 before:content-['\2014\a0'] font-bold uppercase !tracking-[0.02rem] !mt-0">Very important person</footer>
+                        </blockquote>
+                        <h3 class="h2 !mb-4">Sit Vulputate Bibendum Purus</h3>
+                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
+                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
+                      </div>
+                      <!-- /.post-content -->
+                      <div class="post-footer xl:!flex xl:!flex-row xl:!justify-between lg:!flex lg:!flex-row lg:!justify-between md:!flex md:!flex-row md:!justify-between !items-center !mt-8">
+                        <div>
+                          <ul class="pl-0 list-none tag-list  !mb-0">
+<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Still Life</a></li>
+<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Urban</a></li>
+<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Nature</a></li>
+                          </ul>
+                        </div>
+                        <div class="!mb-0 xl:!mb-2 lg:!mb-2 md:!mb-2">
+                          <div class="dropdown share-dropdown btn-group">
+                            <button class="btn btn-sm btn-red !text-white !bg-[#e2626b] border-[#e2626b] hover:text-white hover:bg-[#e2626b] hover:!border-[#e2626b]   active:text-white active:bg-[#e2626b] active:border-[#e2626b] disabled:text-white disabled:bg-[#e2626b] disabled:border-[#e2626b] !rounded-[50rem] btn-icon btn-icon-start dropdown-toggle !mb-0 !mr-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                              <i class="uil uil-share-alt !mr-[0.3rem] text-[0.8rem] before:content-['\ecb0']"></i> Share </button>
+                            <div class="dropdown-menu !shadow-[rgba(30,34,40,0.06)_0px_0px_25px_0px]">
+    <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="#"><i class="uil uil-twitter w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ed59']"></i>Twitter</a>
+    <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="#"><i class="uil uil-facebook-f w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\eae2']"></i>Facebook</a>
+    <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="#"><i class="uil uil-linkedin w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ebd1']"></i>Linkedin</a>
+                            </div>
+                            <!--/.dropdown-menu -->
+                          </div>
+                          <!--/.share-dropdown -->
+                        </div>
+                      </div>
+                      <!-- /.post-footer -->
+                    </article>
+                    <!-- /.post -->
+                  </div>
+                  <!-- /.classic-view -->
+                  <hr>
+                  <div class="author-info xl:!flex lg:!flex md:!flex items-center !mb-3">
+                    <div class="flex items-center">
+                      <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u5.jpg"></figure>
+                      <div>
+                        <h6><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
+                        <span class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none">Sales Manager</span>
+                      </div>
+                    </div>
+                    <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                      <a href="#" class="btn btn-sm btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-file-alt !mr-[0.3rem] before:content-['\eaec'] text-[.8rem]"></i> All Posts</a>
+                    </div>
+                  </div>
+                  <!-- /.author-info -->
+                  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac. Maecenas faucibus mollis interdum.</p>
+                 
+              <nav class="nav social">
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#e94d88] before:content-['\eaa2'] uil uil-dribbble"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube"></i></a>
+              </nav>
+                  <!-- /.social -->
+                  <hr>
+                  <h3 class="!mb-6">You Might Also Like</h3>
+                  <div class="swiper-container blog grid-view !mb-24 relative z-10" data-margin="30" data-dots="true" data-items-md="2" data-items-xs="1">
+                    <div class="swiper">
+                      <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                          <article>
+                        <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                          <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                            <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                          </figcaption>
+                        </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Coding</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ligula tristique quis risus</a></h2>
+                            </div>
+                            <!-- /.post-header -->
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>4</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                        <div class="swiper-slide">
+                          <article>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                                <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                              </figcaption>
+                            </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Workspace</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Nullam id dolor elit id nibh</a></h2>
+                            </div>
+                            <!-- /.post-header -->
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                        <div class="swiper-slide">
+                          <article>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                                <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                              </figcaption>
+                            </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Meeting</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ultricies fusce porta elit</a></h2>
+                            </div>
+                            <!-- /.post-header -->
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Feb 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                        <div class="swiper-slide">
+                          <article>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                                <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                              </figcaption>
+                            </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Business Tips</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Morbi leo risus porta eget</a></h2>
+                            </div>
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7 Jan 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>2</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                      </div>
+                      <!--/.swiper-wrapper -->
+                    </div>
+                    <!-- /.swiper -->
+                  </div>
+                  <!-- /.swiper-container -->
+                  <hr>
+                  <div id="comments" class="relative !m-0">
+                    <h3 class="!mb-6">5 Comments</h3>
+                    <ol id="singlecomments" class="commentlist m-0 p-0 list-none">
+                      <li class="comment !mt-8">
+                        <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                          <div class="flex items-center">
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u1.jpg"></figure>
+                            <div>
+                              <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Connor Gibson</a></h6>
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>14 Jan 2022</li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /div -->
+                          </div>
+                          <!-- /div -->
+                          <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                            <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                          </div>
+                          <!-- /div -->
+                        </div>
+                        <!-- /.comment-header -->
+                        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis integer posuere erat ante.</p>
+                      </li>
+                      <li class="comment !mt-8">
+                        <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                          <div class="flex items-center">
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                            <div>
+                              <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>21 Feb 2022</li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /div -->
+                          </div>
+                          <!-- /div -->
+                          <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                            <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                          </div>
+                          <!-- /div -->
+                        </div>
+                        <!-- /.comment-header -->
+                        <p>Quisque tristique tincidunt metus non aliquam. Quisque ac risus sit amet quam sollicitudin vestibulum vitae malesuada libero. Mauris magna elit, suscipit non ornare et, blandit a tellus. Pellentesque dignissim ornare faucibus mollis.</p>
+                        <ul class="children">
+                          <li class="comment !mt-8">
+                            <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                              <div class="flex items-center">
+                                <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u3.jpg"></figure>
+                                <div>
+                                  <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Pearce Frye</a></h6>
+                                  <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                    <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>22 Feb 2022</li>
+                                  </ul>
+                                  <!-- /.post-meta -->
+                                </div>
+                                <!-- /div -->
+                              </div>
+                              <!-- /div -->
+                              <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                                <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                              </div>
+                              <!-- /div -->
+                            </div>
+                            <!-- /.comment-header -->
+                            <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis.</p>
+                            <ul class="children">
+                              <li class="comment !mt-8">
+                                <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                                  <div class="flex items-center">
+                                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                                    <div>
+                                      <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
+                                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                        <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>4 Apr 2022</li>
+                                      </ul>
+                                      <!-- /.post-meta -->
+                                    </div>
+                                    <!-- /div -->
+                                  </div>
+                                  <!-- /div -->
+                                  <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                                    <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                                  </div>
+                                  <!-- /div -->
+                                </div>
+                                <!-- /.comment-header -->
+                                <p>Nullam id dolor id nibh ultricies vehicula ut id. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia aenean bibendum nulla consectetur.</p>
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="comment !mt-8">
+                        <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                          <div class="flex items-center">
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u4.jpg"></figure>
+                            <div>
+                              <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Lou Bloxham</a></h6>
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>3 May 2022</li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /div -->
+                          </div>
+                          <!-- /div -->
+                          <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                            <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                          </div>
+                          <!-- /div -->
+                        </div>
+                        <!-- /.comment-header -->
+                        <p>Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+                      </li>
+                    </ol>
+                  </div>
+                  <!-- /#comments -->
+                  <hr>
+                  <h3 class="!mb-3">Would you like to share your thoughts?</h3>
+                  <p class="!mb-7">Your email address will not be published. Required fields are marked *</p>
+                  <form class="comment-form">
+                    <div class="form-floating relative !mb-4">
+                      <input type="text" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-name">
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-name">Name *</label>
+                    </div>
+                    <div class="form-floating relative !mb-4">
+                      <input type="email" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-email">
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-email">Email*</label>
+                    </div>
+                    <div class="form-floating relative !mb-4">
+                      <input type="text" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-web">
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-web">Website</label>
+                    </div>
+                    <div class="form-floating relative !mb-4">
+                      <textarea name="textarea" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" style="height: 150px"></textarea>
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Comment *</label>
+                    </div>
+                    <button type="submit" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Submit</button>
+                  </form>
+                  <!-- /.comment-form -->
+                </div>
+                <!-- /.card-body -->
+              </div>
+              <!-- /.card -->
+            </div>
+            </div>
+          <!-- /column -->
+          <aside class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full sidebar !mt-[3rem] xl:!mt-6 lg:!mt-6">
+            <div class="widget">
+              <form class="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[0.9rem] before:!text-[#959ca9] before:z-[9] before:right-3 before:top-2/4 font-Unicons">
+                <div class="form-floating relative !mb-0">
+                  <input id="search-form" type="text" class="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="">
+                  <label for="search-form" class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope
+                  ">Search</label>
+                </div>
+              </form> 
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">About Us</h4>
+              <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
+              <nav class="nav social">
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#e94d88] before:content-['\eaa2'] uil uil-dribbble"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube"></i></a>
+              </nav>
+              <!-- /.social -->
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Popular Posts</h4>
+              <ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
+                <li class=" clear-both block overflow-hidden">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a1.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Magna Mollis Ultricies</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Mar 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+                <li class=" clear-both block overflow-hidden !mt-4">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a2.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ornare Nullam Risus</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>16 Feb 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+                <li class=" clear-both block overflow-hidden !mt-4">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a3.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Euismod Nullam Fusce</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>8 Jan 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>5</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+              </ul>
+              <!-- /.image-list -->
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Categories</h4>
+              <ul class="pl-0 list-none bullet-primary !text-inherit">
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Teamwork (21)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Ideas (19)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Workspace (16)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Coding (7)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Meeting (12)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Business Tips (14)</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Tags</h4>
+              <ul class="pl-0 list-none tag-list">
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Still Life</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Urban</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Nature</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Landscape</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Macro</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Fun</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Workshop</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Photography</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Archive</h4>
+              <ul class="pl-0 list-none bullet-primary !text-inherit">
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">February 2019</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">January 2019</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">December 2018</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">November 2018</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">October 2018</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+          </aside>
+          <!-- /column .sidebar -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:#">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog-post2 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:15 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/blog-post3.html b/public/html/blog-post3.html
new file mode 100644
index 0000000..f2f0556
--- /dev/null
+++ b/public/html/blog-post3.html
@@ -0,0 +1,1153 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog-post3 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:15 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <nav class="navbar navbar-expand-lg center-nav navbar-dark transparent position-absolute xl:pt-[6px] lg:pt-[6px]">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
+              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search before:content-['\eca5'] !text-[1.1rem]"></i></a></li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-white !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+      <div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
+        <div class="container flex !flex-row py-6">
+          <form class="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[1rem] before:!text-[#343f52] before:z-[1] before:right-auto before:top-2/4 before:font-Unicons w-full before:left-0 focus:!outline-offset-0  ">
+            <input id="search-form1" type="text" class="form-control text-[0.8rem] !shadow-none !pl-[1.75rem] !pr-[.75rem] border-0 bg-inherit m-0 block w-full font-medium !leading-[1.7] !text-[#60697b] px-4 py-[0.6rem] rounded-[0.4rem] focus:!outline-offset-0  " placeholder="Type keyword and hit enter">
+          </form> 
+          <button type="button" class="btn-close leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out p-0 border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]  " data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <!-- /.container -->
+      </div>
+      <!-- /.offcanvas -->
+    </header>
+    <!-- /header -->
+    <section class="wrapper image-wrapper bg-image bg-overlay !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" data-image-src="assets/img/photos/bg5.jpg">
+      <div class="container pt-32 pb-20 xl:pt-40 lg:pt-40 md:pt-40 xl:pb-36 lg:pb-36 md:pb-36 !text-center">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="md:w-10/12 lg:w-10/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <div class="post-header !mb-[.9rem]">
+              <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-white !mb-[0.4rem]  text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#ffffff]">
+                <a href="#" class="!text-inherit opacity-100" rel="category">Teamwork</a>
+              </div>
+              <!-- /.post-category -->
+              <h1 class="!text-white !text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4">Commodo Dolor Bibendum Parturient Cursus Mollis</h1>
+              <ul class="!text-[0.8rem] !text-white m-0 p-0 list-none">
+                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>5 Jul 2022</span></li>
+                <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#ffffff]"><a class="!text-[0.8rem] !text-white hover:!text-white" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#ffffff]"><a class="!text-[0.8rem] !text-white hover:!text-white" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3<span> Comments</span></a></li>
+                <li class="post-likes inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#ffffff]"><a class="!text-[0.8rem] !text-white hover:!text-white" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3<span> Likes</span></a></li>
+              </ul>
+              <!-- /.post-meta -->
+            </div>
+            <!-- /.post-header -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px]">
+          <div class="xl:w-8/12 lg:w-8/12 w-ful flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full xl:order-2 lg:order-2">
+            <div class="blog single">
+              <div class="card">
+                <figure class="card-img-top"><img src="assets/img/photos/b1.jpg" alt="image"></figure>
+                <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
+                  <div class="classic-view">
+                    <article class="post !mb-8">
+                      <div class="relative !mb-5">
+                        <h2 class="h1 !mb-4 !leading-[1.3]">Cras mattis consectetur purus fermentum</h2>
+                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum.</p>
+                        <p>Donec sed odio dui consectetur adipiscing elit. Etiam adipiscing tincidunt elit, eu convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero, condimentum ac laoreet vitae, varius tempor nisi. Duis non arcu vel lectus urna mollis ornare vel eu leo.</p>
+                        <div class="flex flex-wrap mx-[-15px] !mt-3 !mb-10">
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b8-full.jpg" data-glightbox="title: Heading; description: Purus Vulputate Sem Tellus Quam" data-gallery="post"> <img src="assets/img/photos/b8.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b9-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b9.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b10-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b10.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                          <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+                            <figure class="overflow-hidden translate-y-0 group rounded cursor-dark"><a href="assets/img/photos/b11-full.jpg" data-glightbox data-gallery="post"> <img src="assets/img/photos/b11.jpg" alt="image"></a></figure>
+                          </div>
+                          <!--/column -->
+                        </div>
+                        <!-- /.row -->
+                        <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna.</p>
+                        <blockquote class="border-l-[#3f78e0] !leading-[1.7] font-medium !pl-4 border-l-[0.15rem] border-solid !text-[1rem] !my-8">
+                          <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula lacinia odio sem nec elit purus.</p>
+                          <footer class="!text-[0.6rem] !text-[#aab0bc] !mb-4 before:content-['\2014\a0'] font-bold uppercase !tracking-[0.02rem] !mt-0">Very important person</footer>
+                        </blockquote>
+                        <h3 class="h2 !mb-4">Sit Vulputate Bibendum Purus</h3>
+                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
+                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
+                      </div>
+                      <!-- /.post-content -->
+                      <div class="post-footer xl:!flex xl:!flex-row xl:!justify-between lg:!flex lg:!flex-row lg:!justify-between md:!flex md:!flex-row md:!justify-between !items-center !mt-8">
+                        <div>
+                          <ul class="pl-0 list-none tag-list  !mb-0">
+<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Still Life</a></li>
+<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Urban</a></li>
+<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Nature</a></li>
+                          </ul>
+                        </div>
+                        <div class="!mb-0 xl:!mb-2 lg:!mb-2 md:!mb-2">
+                          <div class="dropdown share-dropdown btn-group">
+                            <button class="btn btn-sm btn-red !text-white !bg-[#e2626b] border-[#e2626b] hover:text-white hover:bg-[#e2626b] hover:!border-[#e2626b]   active:text-white active:bg-[#e2626b] active:border-[#e2626b] disabled:text-white disabled:bg-[#e2626b] disabled:border-[#e2626b] !rounded-[50rem] btn-icon btn-icon-start dropdown-toggle !mb-0 !mr-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                              <i class="uil uil-share-alt !mr-[0.3rem] text-[0.8rem] before:content-['\ecb0']"></i> Share </button>
+                            <div class="dropdown-menu !shadow-[rgba(30,34,40,0.06)_0px_0px_25px_0px]">
+    <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="#"><i class="uil uil-twitter w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ed59']"></i>Twitter</a>
+    <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="#"><i class="uil uil-facebook-f w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\eae2']"></i>Facebook</a>
+    <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="#"><i class="uil uil-linkedin w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ebd1']"></i>Linkedin</a>
+                            </div>
+                            <!--/.dropdown-menu -->
+                          </div>
+                          <!--/.share-dropdown -->
+                        </div>
+                      </div>
+                      <!-- /.post-footer -->
+                    </article>
+                    <!-- /.post -->
+                  </div>
+                  <!-- /.classic-view -->
+                  <hr>
+                  <div class="author-info xl:!flex lg:!flex md:!flex items-center !mb-3">
+                    <div class="flex items-center">
+                      <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u5.jpg"></figure>
+                      <div>
+                        <h6><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
+                        <span class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none">Sales Manager</span>
+                      </div>
+                    </div>
+                    <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                      <a href="#" class="btn btn-sm btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-file-alt !mr-[0.3rem] before:content-['\eaec'] text-[.8rem]"></i> All Posts</a>
+                    </div>
+                  </div>
+                  <!-- /.author-info -->
+                  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac. Maecenas faucibus mollis interdum.</p>
+                 
+              <nav class="nav social">
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#e94d88] before:content-['\eaa2'] uil uil-dribbble"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube"></i></a>
+              </nav>
+                  <!-- /.social -->
+                  <hr>
+                  <h3 class="!mb-6">You Might Also Like</h3>
+                  <div class="swiper-container blog grid-view !mb-24 relative z-10" data-margin="30" data-dots="true" data-items-md="2" data-items-xs="1">
+                    <div class="swiper">
+                      <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                          <article>
+                        <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                          <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                            <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                          </figcaption>
+                        </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Coding</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ligula tristique quis risus</a></h2>
+                            </div>
+                            <!-- /.post-header -->
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>4</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                        <div class="swiper-slide">
+                          <article>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                                <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                              </figcaption>
+                            </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Workspace</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Nullam id dolor elit id nibh</a></h2>
+                            </div>
+                            <!-- /.post-header -->
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                        <div class="swiper-slide">
+                          <article>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                                <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                              </figcaption>
+                            </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Meeting</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ultricies fusce porta elit</a></h2>
+                            </div>
+                            <!-- /.post-header -->
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Feb 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                        <div class="swiper-slide">
+                          <article>
+                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                                <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                              </figcaption>
+                            </figure>
+                            <div class="post-header !mb-[.9rem]">
+                              <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                                <a href="#" class="hover" rel="category">Business Tips</a>
+                              </div>
+                              <!-- /.post-category -->
+                              <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Morbi leo risus porta eget</a></h2>
+                            </div>
+                            <div class="post-footer">
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none  !mb-0">
+                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7 Jan 2022</span></li>
+                                <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>2</a></li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /.post-footer -->
+                          </article>
+                          <!-- /article -->
+                        </div>
+                        <!--/.swiper-slide -->
+                      </div>
+                      <!--/.swiper-wrapper -->
+                    </div>
+                    <!-- /.swiper -->
+                  </div>
+                  <!-- /.swiper-container -->
+                  <hr>
+                  <div id="comments" class="relative !m-0">
+                    <h3 class="!mb-6">5 Comments</h3>
+                    <ol id="singlecomments" class="commentlist m-0 p-0 list-none">
+                      <li class="comment !mt-8">
+                        <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                          <div class="flex items-center">
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u1.jpg"></figure>
+                            <div>
+                              <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Connor Gibson</a></h6>
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>14 Jan 2022</li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /div -->
+                          </div>
+                          <!-- /div -->
+                          <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                            <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                          </div>
+                          <!-- /div -->
+                        </div>
+                        <!-- /.comment-header -->
+                        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis integer posuere erat ante.</p>
+                      </li>
+                      <li class="comment !mt-8">
+                        <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                          <div class="flex items-center">
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                            <div>
+                              <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>21 Feb 2022</li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /div -->
+                          </div>
+                          <!-- /div -->
+                          <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                            <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                          </div>
+                          <!-- /div -->
+                        </div>
+                        <!-- /.comment-header -->
+                        <p>Quisque tristique tincidunt metus non aliquam. Quisque ac risus sit amet quam sollicitudin vestibulum vitae malesuada libero. Mauris magna elit, suscipit non ornare et, blandit a tellus. Pellentesque dignissim ornare faucibus mollis.</p>
+                        <ul class="children">
+                          <li class="comment !mt-8">
+                            <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                              <div class="flex items-center">
+                                <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u3.jpg"></figure>
+                                <div>
+                                  <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Pearce Frye</a></h6>
+                                  <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                    <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>22 Feb 2022</li>
+                                  </ul>
+                                  <!-- /.post-meta -->
+                                </div>
+                                <!-- /div -->
+                              </div>
+                              <!-- /div -->
+                              <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                                <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                              </div>
+                              <!-- /div -->
+                            </div>
+                            <!-- /.comment-header -->
+                            <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis.</p>
+                            <ul class="children">
+                              <li class="comment !mt-8">
+                                <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                                  <div class="flex items-center">
+                                    <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u2.jpg"></figure>
+                                    <div>
+                                      <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Nikolas Brooten</a></h6>
+                                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                        <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>4 Apr 2022</li>
+                                      </ul>
+                                      <!-- /.post-meta -->
+                                    </div>
+                                    <!-- /div -->
+                                  </div>
+                                  <!-- /div -->
+                                  <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                                    <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                                  </div>
+                                  <!-- /div -->
+                                </div>
+                                <!-- /.comment-header -->
+                                <p>Nullam id dolor id nibh ultricies vehicula ut id. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia aenean bibendum nulla consectetur.</p>
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="comment !mt-8">
+                        <div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
+                          <div class="flex items-center">
+                            <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]"><img class="rounded-[50%]" alt="image" src="assets/img/avatars/u4.jpg"></figure>
+                            <div>
+                              <h6 class=" m-0 !mb-[0.2rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]">Lou Bloxham</a></h6>
+                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                                <li><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>3 May 2022</li>
+                              </ul>
+                              <!-- /.post-meta -->
+                            </div>
+                            <!-- /div -->
+                          </div>
+                          <!-- /div -->
+                          <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
+                            <a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> Reply</a>
+                          </div>
+                          <!-- /div -->
+                        </div>
+                        <!-- /.comment-header -->
+                        <p>Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+                      </li>
+                    </ol>
+                  </div>
+                  <!-- /#comments -->
+                  <hr>
+                  <h3 class="!mb-3">Would you like to share your thoughts?</h3>
+                  <p class="!mb-7">Your email address will not be published. Required fields are marked *</p>
+                  <form class="comment-form">
+                    <div class="form-floating relative !mb-4">
+                      <input type="text" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-name">
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-name">Name *</label>
+                    </div>
+                    <div class="form-floating relative !mb-4">
+                      <input type="email" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-email">
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-email">Email*</label>
+                    </div>
+                    <div class="form-floating relative !mb-4">
+                      <input type="text" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-web">
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-web">Website</label>
+                    </div>
+                    <div class="form-floating relative !mb-4">
+                      <textarea name="textarea" class=" form-control  relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" style="height: 150px"></textarea>
+                      <label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Comment *</label>
+                    </div>
+                    <button type="submit" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Submit</button>
+                  </form>
+                  <!-- /.comment-form -->
+                </div>
+                <!-- /.card-body -->
+              </div>
+              <!-- /.card -->
+            </div>
+            </div>
+          <!-- /column -->
+          <aside class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full sidebar !mt-[3rem] xl:!mt-6 lg:!mt-6">
+            <div class="widget">
+              <form class="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[0.9rem] before:!text-[#959ca9] before:z-[9] before:right-3 before:top-2/4 font-Unicons">
+                <div class="form-floating relative !mb-0">
+                  <input id="search-form" type="text" class="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="">
+                  <label for="search-form" class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope
+                  ">Search</label>
+                </div>
+              </form> 
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">About Us</h4>
+              <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
+              <nav class="nav social">
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#e94d88] before:content-['\eaa2'] uil uil-dribbble"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube"></i></a>
+              </nav>
+              <!-- /.social -->
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Popular Posts</h4>
+              <ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
+                <li class=" clear-both block overflow-hidden">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a1.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Magna Mollis Ultricies</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Mar 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+                <li class=" clear-both block overflow-hidden !mt-4">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a2.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ornare Nullam Risus</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>16 Feb 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+                <li class=" clear-both block overflow-hidden !mt-4">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a3.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Euismod Nullam Fusce</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>8 Jan 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>5</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+              </ul>
+              <!-- /.image-list -->
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Categories</h4>
+              <ul class="pl-0 list-none bullet-primary !text-inherit">
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Teamwork (21)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Ideas (19)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Workspace (16)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Coding (7)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Meeting (12)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Business Tips (14)</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Tags</h4>
+              <ul class="pl-0 list-none tag-list">
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Still Life</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Urban</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Nature</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Landscape</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Macro</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Fun</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Workshop</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Photography</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Archive</h4>
+              <ul class="pl-0 list-none bullet-primary !text-inherit">
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">February 2019</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">January 2019</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">December 2018</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">November 2018</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">October 2018</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+          </aside>
+          <!-- /column .sidebar -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:#">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog-post3 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:15 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/blog.html b/public/html/blog.html
new file mode 100644
index 0000000..722ae81
--- /dev/null
+++ b/public/html/blog.html
@@ -0,0 +1,961 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:05 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search before:content-['\eca5'] !text-[1.1rem]"></i></a></li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+      <div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
+        <div class="container flex !flex-row py-6">
+          <form class=" search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[1rem] before:!text-[#343f52] before:z-[1] before:right-auto before:top-2/4 before:font-Unicons w-full before:left-0 focus:!outline-offset-0  ">
+            <input id="search-form1" type="text" class="form-control text-[0.8rem] !shadow-none !pl-[1.75rem] !pr-[.75rem] border-0 bg-inherit m-0 block w-full font-medium !leading-[1.7] !text-[#60697b] px-4 py-[0.6rem] rounded-[0.4rem] focus:!outline-offset-0  " placeholder="Type keyword and hit enter">
+          </form> 
+          <button type="button" class="btn-close leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out p-0 border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]  " data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <!-- /.container -->
+      </div>
+      <!-- /.offcanvas -->
+    </header>
+    <!-- /header -->
+    <section class="wrapper !bg-[#edf2fc]">
+      <div class="container !pt-10 !pb-36 xl:!pt-[4.5rem] lg:!pt-[4.5rem] md:!pt-[4.5rem] xl:!pb-40 lg:!pb-40 md:!pb-40 !text-center">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="md:w-7/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">Business News</h1>
+            <p class="lead lg:!px-[1.25rem] xl:!px-[1.25rem] xxl:!px-[2rem] !leading-[1.65] text-[0.9rem] font-medium">Welcome to our journal. Here you can find the latest company news and business articles.</p>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <div class="wrapper !bg-[#ffffff]">
+      <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <div class="blog classic-view !mt-[-7rem]">
+              <article class="post !mb-8">
+                <div class="card">
+                  <figure class="card-img-top overlay overlay-1 hover-scale group"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'><img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b1.jpg" alt="image"></a>
+                    <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                      <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                    </figcaption>
+                  </figure>
+                  <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4  ">
+                    <div class="post-header !mb-[.9rem]">
+                      <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                        <a href="#" class="hover" rel="category">Teamwork</a>
+                      </div>
+                      <!-- /.post-category -->
+                      <h2 class="post-title !mt-1 !leading-[1.35] !mb-0"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Amet Dolor Bibendum Parturient Cursus</a></h2>
+                    </div>
+                    <!-- /.post-header -->
+                    <div class="!relative">
+                      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur.</p>
+                    </div>
+                    <!-- /.post-content -->
+                  </div>
+                  <!--/.card-body -->
+                  <div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>5 Jul 2022</span></li>
+                      <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3<span> Comments</span></a></li>
+                      <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                  <!-- /.card-footer -->
+                </div>
+                <!-- /.card -->
+              </article>
+              <!-- /.post -->
+              <article class="post !mb-8">
+                <div class="card">
+                  <div class="post-slider card-img-top">
+                    <div class="swiper-container dots-over relative !z-10" data-margin="5" data-nav="true" data-dots="true">
+                      <div class="swiper">
+                        <div class="swiper-wrapper">
+                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b2.jpg" alt="image"></div>
+                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b3.jpg" alt="image"></div>
+                        </div>
+                        <!--/.swiper-wrapper -->
+                      </div>
+                      <!-- /.swiper -->
+                    </div>
+                    <!-- /.swiper-container -->
+                  </div>
+                  <!-- /.post-slider -->
+                  <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4  ">
+                    <div class="post-header !mb-[.9rem]">
+                      <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                        <a href="#" class="hover" rel="category">Ideas</a>
+                      </div>
+                      <!-- /.post-category -->
+                      <h2 class="post-title !mt-1 !leading-[1.35] !mb-0"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Fringilla Ligula Pharetra Amet</a></h2>
+                    </div>
+                    <!-- /.post-header -->
+                    <div class="!relative">
+                      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur.</p>
+                    </div>
+                    <!-- /.post-content -->
+                  </div>
+                  <!--/.card-body -->
+                  <div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>25 Jun 2022</span></li>
+                      <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>5<span> Comments</span></a></li>
+                      <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>4</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                  <!-- /.card-footer -->
+                </div>
+                <!-- /.card -->
+              </article>
+              <!-- /.post -->
+              <article class="post !mb-8">
+                <div class="card">
+                  <div class="card-img-top">
+                    <div class="player relative z-[2] rounded-[0.4rem]" data-plyr-provider="youtube" data-plyr-embed-id="j_Y2Gwaj7Gs"></div>
+                  </div>
+                  <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4  ">
+                    <div class="post-header !mb-[.9rem]">
+                      <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                        <a href="#" class="hover" rel="category">Workspace</a>
+                      </div>
+                      <!-- /.post-category -->
+                      <h2 class="post-title !mt-1 !leading-[1.35] !mb-0"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Consectetur Bibendum Sollicitudin Vulputate</a></h2>
+                    </div>
+                    <!-- /.post-header -->
+                    <div class="!relative">
+                      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur.</p>
+                    </div>
+                    <!-- /.post-content -->
+                  </div>
+                  <!--/.card-body -->
+                  <div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>18 May 2022</span></li>
+                      <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>8<span> Comments</span></a></li>
+                      <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>6</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                  <!-- /.card-footer -->
+                </div>
+                <!-- /.card -->
+              </article>
+              <!-- /.post -->
+            </div>
+            <!-- /.blog -->
+            <div class="blog itemgrid grid-view">
+              <div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Coding</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ligula tristique quis risus</a></h2>
+                      </div>
+                      <!-- /.post-header -->
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>4</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>5</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Workspace</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Nullam id dolor elit id nibh</a></h2>
+                      </div>
+                      <!-- /.post-header -->
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Meeting</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ultricies fusce porta elit</a></h2>
+                      </div>
+                      <!-- /.post-header -->
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Feb 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Business Tips</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Morbi leo risus porta eget</a></h2>
+                      </div>
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7 Jan 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>2</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>5</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+              </div>
+              <!-- /.row -->
+            </div>
+            <!-- /.blog -->
+            <nav class="flex" aria-label="pagination">
+              <ul class="pagination">
+                <li class="page-item disabled">
+                  <a class="page-link" href="#" aria-label="Previous">
+                    <span aria-hidden="true"><i class="uil uil-arrow-left before:content-['\e949']"></i></span>
+                  </a>
+                </li>
+                <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                <li class="page-item"><a class="page-link" href="#">2</a></li>
+                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                <li class="page-item">
+                  <a class="page-link" href="#" aria-label="Next">
+                    <span aria-hidden="true"><i class="uil uil-arrow-right before:content-['\e94c']"></i></span>
+                  </a>
+                </li>
+              </ul>
+              <!-- /.pagination -->
+            </nav>
+            <!-- /nav -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </div>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:07 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/blog2.html b/public/html/blog2.html
new file mode 100644
index 0000000..6e5984c
--- /dev/null
+++ b/public/html/blog2.html
@@ -0,0 +1,1067 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog2 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:07 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <nav class="navbar navbar-expand-lg center-nav navbar-light navbar-bg-light">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search before:content-['\eca5'] !text-[1.1rem]"></i></a></li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+      <div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
+        <div class="container flex !flex-row py-6">
+          <form class="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[1rem] before:!text-[#343f52] before:z-[1] before:right-auto before:top-2/4 before:font-Unicons w-full before:left-0 focus:!outline-offset-0  ">
+            <input id="search-form1" type="text" class="form-control text-[0.8rem] !shadow-none !pl-[1.75rem] !pr-[.75rem] border-0 bg-inherit m-0 block w-full font-medium !leading-[1.7] !text-[#60697b] px-4 py-[0.6rem] rounded-[0.4rem] focus:!outline-offset-0  " placeholder="Type keyword and hit enter">
+          </form> 
+          <button type="button" class="btn-close leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out p-0 border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]  " data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <!-- /.container -->
+      </div>
+      <!-- /.offcanvas -->
+    </header>
+    <!-- /header -->
+    <section class="section-frame overflow-hidden">
+      <div class="wrapper !bg-[#edf2fc]">
+        <div class="container py-14 xl:!py-24 lg:!py-24 md:!py-24 !text-center">
+          <div class="flex flex-wrap mx-[-15px]">
+            <div class="md:w-7/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+              <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">Business News</h1>
+              <p class="lead lg:!px-[1.25rem] xl:!px-[1.25rem] xxl:!px-[2rem] !leading-[1.65] text-[0.9rem] font-medium !mb-[.25rem]">Welcome to our journal. Here you can find the latest company news and business articles.</p>
+            </div>
+            <!-- /column -->
+          </div>
+          <!-- /.row -->
+        </div>
+        <!-- /.container -->
+      </div>
+      <!-- /.wrapper -->
+    </section>
+    <!-- /section -->
+    <div class="wrapper !bg-[#ffffff]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px]">
+          <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
+            <div class="blog classic-view">
+              <article class="post !mb-8">
+                <div class="card">
+                  <figure class="card-img-top overlay overlay-1 hover-scale group"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'><img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b1.jpg" alt="image"></a>
+                    <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                      <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                    </figcaption>
+                  </figure>
+                  <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4  ">
+                    <div class="post-header !mb-[.9rem]">
+                      <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                        <a href="#" class="hover" rel="category">Teamwork</a>
+                      </div>
+                      <!-- /.post-category -->
+                      <h2 class="post-title !mt-1 !leading-[1.35] !mb-0"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Amet Dolor Bibendum Parturient Cursus</a></h2>
+                    </div>
+                    <!-- /.post-header -->
+                    <div class="!relative">
+                      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus.</p>
+                    </div>
+                    <!-- /.post-content -->
+                  </div>
+                  <!--/.card-body -->
+                  <div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>5 Jul 2022</span></li>
+                      <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3<span> Comments</span></a></li>
+                      <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                  <!-- /.card-footer -->
+                </div>
+                <!-- /.card -->
+              </article>
+              <!-- /.post -->
+              <article class="post !mb-8">
+                <div class="card">
+                  <div class="post-slider card-img-top">
+                    <div class="swiper-container dots-over relative !z-10" data-margin="5" data-nav="true" data-dots="true">
+                      <div class="swiper">
+                        <div class="swiper-wrapper">
+                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b2.jpg" alt="image"></div>
+                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b3.jpg" alt="image"></div>
+                        </div>
+                        <!--/.swiper-wrapper -->
+                      </div>
+                      <!-- /.swiper -->
+                    </div>
+                    <!-- /.swiper-container -->
+                  </div>
+                  <!-- /.post-slider -->
+                  <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4  ">
+                    <div class="post-header !mb-[.9rem]">
+                      <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                        <a href="#" class="hover" rel="category">Ideas</a>
+                      </div>
+                      <!-- /.post-category -->
+                      <h2 class="post-title !mt-1 !leading-[1.35] !mb-0"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Fringilla Ligula Pharetra Amet</a></h2>
+                    </div>
+                    <!-- /.post-header -->
+                    <div class="!relative">
+                      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus.</p>
+                    </div>
+                    <!-- /.post-content -->
+                  </div>
+                  <!--/.card-body -->
+                  <div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>25 Jun 2022</span></li>
+                      <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>5<span> Comments</span></a></li>
+                      <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>4</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                  <!-- /.card-footer -->
+                </div>
+                <!-- /.card -->
+              </article>
+              <!-- /.post -->
+              <article class="post !mb-8">
+                <div class="card">
+                  <div class="card-img-top">
+                    <div class="player relative z-[2] rounded-[0.4rem]" data-plyr-provider="youtube" data-plyr-embed-id="j_Y2Gwaj7Gs"></div>
+                  </div>
+                  <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4  ">
+                    <div class="post-header !mb-[.9rem]">
+                      <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                        <a href="#" class="hover" rel="category">Workspace</a>
+                      </div>
+                      <!-- /.post-category -->
+                      <h2 class="post-title !mt-1 !leading-[1.35] !mb-0"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Consectetur Bibendum Sollicitudin Vulputate</a></h2>
+                    </div>
+                    <!-- /.post-header -->
+                    <div class="!relative">
+                      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus.</p>
+                    </div>
+                    <!-- /.post-content -->
+                  </div>
+                  <!--/.card-body -->
+                  <div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>18 May 2022</span></li>
+                      <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>8<span> Comments</span></a></li>
+                      <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>6</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                  <!-- /.card-footer -->
+                </div>
+                <!-- /.card -->
+              </article>
+              <!-- /.post -->
+            </div>
+            <!-- /.blog -->
+            <div class="blog itemgrid grid-view">
+              <div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Coding</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ligula tristique quis risus</a></h2>
+                      </div>
+                      <!-- /.post-header -->
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>4</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>5</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Workspace</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Nullam id dolor elit id nibh</a></h2>
+                      </div>
+                      <!-- /.post-header -->
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Meeting</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ultricies fusce porta elit</a></h2>
+                      </div>
+                      <!-- /.post-header -->
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Feb 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Business Tips</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Morbi leo risus porta eget</a></h2>
+                      </div>
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7 Jan 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>2</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>5</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+              </div>
+              <!-- /.row -->
+            </div>
+            <!-- /.blog -->
+            <nav class="flex" aria-label="pagination">
+              <ul class="pagination">
+                <li class="page-item disabled">
+                  <a class="page-link" href="#" aria-label="Previous">
+                    <span aria-hidden="true"><i class="uil uil-arrow-left before:content-['\e949']"></i></span>
+                  </a>
+                </li>
+                <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                <li class="page-item"><a class="page-link" href="#">2</a></li>
+                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                <li class="page-item">
+                  <a class="page-link" href="#" aria-label="Next">
+                    <span aria-hidden="true"><i class="uil uil-arrow-right before:content-['\e94c']"></i></span>
+                  </a>
+                </li>
+              </ul>
+              <!-- /.pagination -->
+            </nav>
+            <!-- /nav -->
+          </div>
+          <!-- /column -->
+          <aside class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full sidebar !mt-8 xl:!mt-6 lg:!mt-6">
+            <div class="widget">
+              <form class="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[0.9rem] before:!text-[#959ca9] before:z-[9] before:right-3 before:top-2/4 font-Unicons">
+                <div class="form-floating relative !mb-0">
+                  <input id="search-form" type="text" class="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="">
+                  <label for="search-form" class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope
+                  ">Search</label>
+                </div>
+              </form> 
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">About Us</h4>
+              <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
+              <nav class="nav social">
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#e94d88] before:content-['\eaa2'] uil uil-dribbble"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube"></i></a>
+              </nav>
+              <!-- /.social -->
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Popular Posts</h4>
+              <ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
+                <li class=" clear-both block overflow-hidden">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a1.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Magna Mollis Ultricies</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Mar 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+                <li class=" clear-both block overflow-hidden !mt-4">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a2.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ornare Nullam Risus</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>16 Feb 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+                <li class=" clear-both block overflow-hidden !mt-4">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a3.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Euismod Nullam Fusce</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>8 Jan 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>5</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+              </ul>
+              <!-- /.image-list -->
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Categories</h4>
+              <ul class="pl-0 list-none bullet-primary !text-inherit">
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Teamwork (21)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Ideas (19)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Workspace (16)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Coding (7)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Meeting (12)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Business Tips (14)</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Tags</h4>
+              <ul class="pl-0 list-none tag-list">
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Still Life</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Urban</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Nature</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Landscape</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Macro</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Fun</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Workshop</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Photography</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Archive</h4>
+              <ul class="pl-0 list-none bullet-primary !text-inherit">
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">February 2019</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">January 2019</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">December 2018</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">November 2018</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">October 2018</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+          </aside>
+          <!-- /column .sidebar -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </div>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:#">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog2 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:09 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/blog3.html b/public/html/blog3.html
new file mode 100644
index 0000000..1ac9c55
--- /dev/null
+++ b/public/html/blog3.html
@@ -0,0 +1,1067 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog3 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:09 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <nav class="navbar navbar-expand-lg center-nav navbar-light navbar-bg-light">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search before:content-['\eca5'] !text-[1.1rem]"></i></a></li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+      <div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
+        <div class="container flex !flex-row py-6">
+          <form class="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[1rem] before:!text-[#343f52] before:z-[1] before:right-auto before:top-2/4 before:font-Unicons w-full before:left-0 focus:!outline-offset-0  ">
+            <input id="search-form1" type="text" class="form-control text-[0.8rem] !shadow-none !pl-[1.75rem] !pr-[.75rem] border-0 bg-inherit m-0 block w-full font-medium !leading-[1.7] !text-[#60697b] px-4 py-[0.6rem] rounded-[0.4rem] focus:!outline-offset-0  " placeholder="Type keyword and hit enter">
+          </form> 
+          <button type="button" class="btn-close leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out p-0 border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]  " data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <!-- /.container -->
+      </div>
+      <!-- /.offcanvas -->
+    </header>
+    <!-- /header -->
+    <section class="section-frame overflow-hidden">
+      <div class="wrapper !bg-[#edf2fc]">
+        <div class="container py-14 xl:!py-24 lg:!py-24 md:!py-24 !text-center">
+          <div class="flex flex-wrap mx-[-15px]">
+            <div class="md:w-7/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+              <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">Business News</h1>
+              <p class="lead lg:!px-[1.25rem] xl:!px-[1.25rem] xxl:!px-[2rem] !leading-[1.65] text-[0.9rem] font-medium !mb-[.25rem]">Welcome to our journal. Here you can find the latest company news and business articles.</p>
+            </div>
+            <!-- /column -->
+          </div>
+          <!-- /.row -->
+        </div>
+        <!-- /.container -->
+      </div>
+      <!-- /.wrapper -->
+    </section>
+    <!-- /section -->
+    <div class="wrapper !bg-[#ffffff]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px]">
+          <div class="xl:w-8/12 lg:w-8/12 w-ful flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full xl:order-2 lg:order-2">
+            <div class="blog classic-view">
+              <article class="post !mb-8">
+                <div class="card">
+                  <figure class="card-img-top overlay overlay-1 hover-scale group"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'><img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b1.jpg" alt="image"></a>
+                    <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                      <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                    </figcaption>
+                  </figure>
+                  <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4  ">
+                    <div class="post-header !mb-[.9rem]">
+                      <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                        <a href="#" class="hover" rel="category">Teamwork</a>
+                      </div>
+                      <!-- /.post-category -->
+                      <h2 class="post-title !mt-1 !leading-[1.35] !mb-0"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Amet Dolor Bibendum Parturient Cursus</a></h2>
+                    </div>
+                    <!-- /.post-header -->
+                    <div class="!relative">
+                      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus.</p>
+                    </div>
+                    <!-- /.post-content -->
+                  </div>
+                  <!--/.card-body -->
+                  <div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>5 Jul 2022</span></li>
+                      <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3<span> Comments</span></a></li>
+                      <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                  <!-- /.card-footer -->
+                </div>
+                <!-- /.card -->
+              </article>
+              <!-- /.post -->
+              <article class="post !mb-8">
+                <div class="card">
+                  <div class="post-slider card-img-top">
+                    <div class="swiper-container dots-over relative !z-10" data-margin="5" data-nav="true" data-dots="true">
+                      <div class="swiper">
+                        <div class="swiper-wrapper">
+                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b2.jpg" alt="image"></div>
+                          <div class="swiper-slide"><img class="w-full h-auto" src="assets/img/photos/b3.jpg" alt="image"></div>
+                        </div>
+                        <!--/.swiper-wrapper -->
+                      </div>
+                      <!-- /.swiper -->
+                    </div>
+                    <!-- /.swiper-container -->
+                  </div>
+                  <!-- /.post-slider -->
+                  <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4  ">
+                    <div class="post-header !mb-[.9rem]">
+                      <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                        <a href="#" class="hover" rel="category">Ideas</a>
+                      </div>
+                      <!-- /.post-category -->
+                      <h2 class="post-title !mt-1 !leading-[1.35] !mb-0"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Fringilla Ligula Pharetra Amet</a></h2>
+                    </div>
+                    <!-- /.post-header -->
+                    <div class="!relative">
+                      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus.</p>
+                    </div>
+                    <!-- /.post-content -->
+                  </div>
+                  <!--/.card-body -->
+                  <div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>25 Jun 2022</span></li>
+                      <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>5<span> Comments</span></a></li>
+                      <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>4</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                  <!-- /.card-footer -->
+                </div>
+                <!-- /.card -->
+              </article>
+              <!-- /.post -->
+              <article class="post !mb-8">
+                <div class="card">
+                  <div class="card-img-top">
+                    <div class="player relative z-[2] rounded-[0.4rem]" data-plyr-provider="youtube" data-plyr-embed-id="j_Y2Gwaj7Gs"></div>
+                  </div>
+                  <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4  ">
+                    <div class="post-header !mb-[.9rem]">
+                      <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                        <a href="#" class="hover" rel="category">Workspace</a>
+                      </div>
+                      <!-- /.post-category -->
+                      <h2 class="post-title !mt-1 !leading-[1.35] !mb-0"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Consectetur Bibendum Sollicitudin Vulputate</a></h2>
+                    </div>
+                    <!-- /.post-header -->
+                    <div class="!relative">
+                      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus.</p>
+                    </div>
+                    <!-- /.post-content -->
+                  </div>
+                  <!--/.card-body -->
+                  <div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>18 May 2022</span></li>
+                      <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Trunçgil</span></a></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>8<span> Comments</span></a></li>
+                      <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>6</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                  <!-- /.card-footer -->
+                </div>
+                <!-- /.card -->
+              </article>
+              <!-- /.post -->
+            </div>
+            <!-- /.blog -->
+            <div class="blog itemgrid grid-view">
+              <div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b4.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Coding</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ligula tristique quis risus</a></h2>
+                      </div>
+                      <!-- /.post-header -->
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>4</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>5</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b5.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Workspace</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Nullam id dolor elit id nibh</a></h2>
+                      </div>
+                      <!-- /.post-header -->
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b6.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Meeting</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ultricies fusce porta elit</a></h2>
+                      </div>
+                      <!-- /.post-header -->
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Feb 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>3</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+                <article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
+                  <div class="card">
+                    <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="assets/img/photos/b7.jpg" alt="image"></a>
+                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
+                      </figcaption>
+                    </figure>
+                    <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4  ">
+                      <div class="post-header !mb-[.9rem]">
+                        <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
+                          <a href="#" class="hover" rel="category">Business Tips</a>
+                        </div>
+                        <!-- /.post-category -->
+                        <h2 class="post-title h3 !mt-1 !mb-3"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Morbi leo risus porta eget</a></h2>
+                      </div>
+                      <div class="!relative">
+                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
+                      </div>
+                      <!-- /.post-content -->
+                    </div>
+                    <!--/.card-body -->
+                    <div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
+                      <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
+                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7 Jan 2022</span></li>
+                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>2</a></li>
+                        <li class="post-likes !ml-auto inline-block"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></i>5</a></li>
+                      </ul>
+                      <!-- /.post-meta -->
+                    </div>
+                    <!-- /.card-footer -->
+                  </div>
+                  <!-- /.card -->
+                </article>
+                <!-- /.post -->
+              </div>
+              <!-- /.row -->
+            </div>
+            <!-- /.blog -->
+            <nav class="flex" aria-label="pagination">
+              <ul class="pagination">
+                <li class="page-item disabled">
+                  <a class="page-link" href="#" aria-label="Previous">
+                    <span aria-hidden="true"><i class="uil uil-arrow-left before:content-['\e949']"></i></span>
+                  </a>
+                </li>
+                <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                <li class="page-item"><a class="page-link" href="#">2</a></li>
+                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                <li class="page-item">
+                  <a class="page-link" href="#" aria-label="Next">
+                    <span aria-hidden="true"><i class="uil uil-arrow-right before:content-['\e94c']"></i></span>
+                  </a>
+                </li>
+              </ul>
+              <!-- /.pagination -->
+            </nav>
+            <!-- /nav -->
+          </div>
+          <!-- /column -->
+          <aside class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full sidebar !mt-8 xl:!mt-6 lg:!mt-6">
+            <div class="widget">
+              <form class="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[0.9rem] before:!text-[#959ca9] before:z-[9] before:right-3 before:top-2/4 font-Unicons">
+                <div class="form-floating relative !mb-0">
+                  <input id="search-form" type="text" class="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset]   focus-visible:!border-[rgba(63,120,224,0.5)]   placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="Search">
+                  <label for="search-form" class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope
+                  ">Search</label>
+                </div>
+              </form> 
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">About Us</h4>
+              <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
+              <nav class="nav social">
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#e94d88] before:content-['\eaa2'] uil uil-dribbble"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram"></i></a>
+                <a class=" text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class=" text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube"></i></a>
+              </nav>
+              <!-- /.social -->
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Popular Posts</h4>
+              <ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
+                <li class=" clear-both block overflow-hidden">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a1.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Magna Mollis Ultricies</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Mar 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+                <li class=" clear-both block overflow-hidden !mt-4">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"> <a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a2.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Ornare Nullam Risus</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>16 Feb 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+                <li class=" clear-both block overflow-hidden !mt-4">
+                  <figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]"><a href='blog-post.html'><img class="!rounded-[.4rem]" src="assets/img/photos/a3.jpg" alt="image"></a></figure>
+                  <div class="!relative !ml-[4.25rem] !mb-0">
+                    <h6 class="!mb-2"> <a class='!text-[#343f52] hover:!text-[#3f78e0]' href='blog-post.html'>Euismod Nullam Fusce</a> </h6>
+                    <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
+                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>8 Jan 2022</span></li>
+                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>5</a></li>
+                    </ul>
+                    <!-- /.post-meta -->
+                  </div>
+                </li>
+              </ul>
+              <!-- /.image-list -->
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Categories</h4>
+              <ul class="pl-0 list-none bullet-primary !text-inherit">
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Teamwork (21)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Ideas (19)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Workspace (16)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Coding (7)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Meeting (12)</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Business Tips (14)</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Tags</h4>
+              <ul class="pl-0 list-none tag-list">
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Still Life</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Urban</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Nature</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Landscape</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Macro</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Fun</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Workshop</a></li>
+    <li class=" !mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block"><a href="#" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">Photography</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+            <div class="widget !mt-[40px]">
+              <h4 class="widget-title !mb-3">Archive</h4>
+              <ul class="pl-0 list-none bullet-primary !text-inherit">
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">February 2019</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">January 2019</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">December 2018</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">November 2018</a></li>
+        <li class="relative !pl-[1rem] before:absolute  before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">October 2018</a></li>
+              </ul>
+            </div>
+            <!-- /.widget -->
+          </aside>
+          <!-- /column .sidebar -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </div>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:#">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/blog3 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:09 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/career.html b/public/html/career.html
new file mode 100644
index 0000000..add8878
--- /dev/null
+++ b/public/html/career.html
@@ -0,0 +1,1099 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/career by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:26 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+  <style>
+    .accordion-wrapper .card-header button.collapsed {
+    color: #343f52 !important;
+  }
+  .accordion-wrapper .card-header button:hover,
+  .accordion-wrapper .card-header button{
+      color: #3f78e0 !important;
+    }
+    </style>
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item dropdown language-select uppercase group">
+                <a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
+                <ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
+                </ul>
+              </li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+    </header>
+    <!-- /header -->
+    <section class="wrapper !bg-[#edf2fc]">
+      <div class="container pt-10 pb-[8rem] md:!pb-[10rem] xl:!pt-[4.5rem] lg:!pt-[4.5rem] md:!pt-[4.5rem] xl:!pb-[12.5rem] lg:!pb-[12.5rem] !text-center">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-12">
+            <h1 class="!text-[.75rem] uppercase !text-[#3f78e0] !tracking-[0.02rem] !mb-3 !leading-[1.3]">Join Our Team</h1>
+            <h3 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem]">We bring solutions to make life easier for our customers.</h3>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container pb-[17.5rem] xl:pb-[22.5rem] lg:pb-[22.5rem] md:pb-[22.5rem]">
+        <div class="flex flex-wrap mx-[-15px] !mb-[4.5rem]">
+          <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[-8rem] md:!mt-[-10rem] xl:!mt-[-12.5rem] lg:!mt-[-12.5rem] !relative">
+            <div class="shape bg-dot red rellax !w-[6rem] !h-[8rem] absolute z-[1] bg-[radial-gradient(#e2626b_2px,transparent_2.5px)] opacity-50" data-rellax-speed="1" style="top: 1rem; left: -3.2rem;"></div>
+            <div class="shape pale-primary !w-[9rem] !h-[9rem] rellax absolute z-[1]" data-rellax-speed="1" style="bottom: 2rem; right: -3rem;"><img src="assets/img/svg/hex.svg" class="svg-inject icon-svg !w-full !h-full" alt="image"></div>
+            <figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]" src="assets/img/photos/about18.jpg" alt="image"></figure>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-40px]">
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
+            <div class="flex flex-row">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.1 256.01" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/target.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#3f78e0]  !mr-4"><path class="fill-secondary" d="M178.66 79.37L166.93 91.1a76.68 76.68 0 014.91 11.52 85.77 85.77 0 0114.93-1.28h1.39a93.65 93.65 0 00-9.5-21.97zM0 128a96.1 96.1 0 00109.65 95 82.93 82.93 0 01-5.65-15.42 67 67 0 01-8 .43A80 80 0 0196 48a79 79 0 0137 9.17l11.73-11.73A94.73 94.73 0 0096 32a96.14 96.14 0 00-96 96z"></path><path class="fill-secondary" d="M37.33 128A58.78 58.78 0 0096 186.68a47.26 47.26 0 005.44-.32A82.71 82.71 0 01103 170a37.32 37.32 0 01-7 .64 42.67 42.67 0 010-85.34 32.88 32.88 0 018 .84l12.91-12.91a57 57 0 00-20.91-4A58.81 58.81 0 0037.33 128z"></path><path class="fill-secondary" d="M96 106.68A21.33 21.33 0 10117.33 128 21.39 21.39 0 0096 106.68zm0 26.66a5.33 5.33 0 115.33-5.33 5.28 5.28 0 01-5.33 5.33z"></path><path class="fill-primary" d="M96.1 136a8 8 0 01-5.67-13.65L159.76 53a8 8 0 0111.31 11.31l-69.33 69.33A8 8 0 0196.1 136z"></path><path class="fill-primary" d="M194.77 64H168.1a8 8 0 01-8-8V29.34a8.08 8.08 0 012.33-5.67l21.33-21.33A8 8 0 01197.42 8v18.68h18.68a8 8 0 015.66 13.66l-21.33 21.33a8 8 0 01-5.66 2.33zm-8 53.34a69.34 69.34 0 1069.33 69.34 69.4 69.4 0 00-69.33-69.34zm29.87 56.11L182 210.78a8 8 0 01-11.09.64l-18.67-16a8 8 0 1110.41-12.15l12.84 11 29.44-31.69a8 8 0 0111.74 10.88z"></path></svg>
+              </div>
+              <div>
+                <h4 class="!mb-1">Career Growth</h4>
+                <p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
+              </div>
+            </div>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
+            <div class="flex flex-row">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.02 202.68" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/video-chat.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#3f78e0]  !mr-4"><g data-name="Layer 2"><path class="fill-primary" d="M245.33 181.33H10.67a10.68 10.68 0 000 21.35h234.67a10.68 10.68 0 100-21.35z"></path><path class="fill-primary" d="M112 66.66a28.3 28.3 0 001.07 8h-70.4v106.67H21.33V74.66a21.39 21.39 0 0121.33-21.33H112zm122.67 30.51v84.16h-21.33v-81a33.47 33.47 0 0014.93-7.79l5.33 4a3.67 3.67 0 001.07.64z"></path><circle class="fill-primary" cx="117.33" cy="117.33" r="21.33"></circle><path class="fill-primary" d="M160 178.66v2.67H74.67v-2.67A29.32 29.32 0 01104 149.33h26.67A29.32 29.32 0 01160 178.66z"></path><path class="fill-secondary" d="M248 85.33a8 8 0 01-4.8-1.6L223.82 69.2a18.67 18.67 0 01-18.49 16.13h-58.67A18.68 18.68 0 01128 66.66V16c0-7.37 4.9-16 18.67-16h58.67A18.69 18.69 0 01224 17.62l18.9-15.76A8 8 0 01256 8v69.33a8 8 0 01-4.42 7.15 7.82 7.82 0 01-3.58.85z"></path></g></svg>
+              </div>
+              <div>
+                <h4 class="!mb-1">Work From Anywhere</h4>
+                <p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
+              </div>
+            </div>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
+            <div class="flex flex-row">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 234.67" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/wallet.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#3f78e0]  !mr-4"><path class="fill-secondary" d="M184.21 42.75L161.57 4a8 8 0 00-4.91-3.76 8.1 8.1 0 00-6.12.9L81.31 42.66z"></path><path class="fill-primary" d="M32 53.33A10.67 10.67 0 0132 32h36l35.63-21.33H32A32 32 0 00.53 37.33 10.9 10.9 0 000 40v162.67a32.09 32.09 0 0032 32h181.33a21.39 21.39 0 0021.33-21.32V192H208a48 48 0 110-96h26.67V74.69a21.39 21.39 0 00-21.33-21.33H32zM202.67 32a21.3 21.3 0 00-18.45-21.12l18.45 31.79z"></path><path class="fill-secondary" d="M248 112h-40a32 32 0 000 64h40a8 8 0 008-8v-48a8 8 0 00-8-8zm-40 42.66A10.67 10.67 0 11218.67 144 10.68 10.68 0 01208 154.66z"></path></svg>
+              </div>
+              <div>
+                <h4 class="!mb-1">Smart Salary</h4>
+                <p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
+              </div>
+            </div>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
+            <div class="flex flex-row">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/building.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#3f78e0]  !mr-4"><g data-name="Layer 2"><path class="fill-secondary" d="M250.58 30.14l-56-19a8 8 0 00-5.16 0l-56 19a8 8 0 00-5.42 7.57v42.87c0 52.32 58.38 77.72 60.88 78.8a8.09 8.09 0 006.26 0c2.48-1.08 60.86-26.48 60.86-78.8V37.71a8 8 0 00-5.42-7.57zm-23.52 40.45l-29.33 37.33a10.66 10.66 0 01-15.33 1.5l-18.67-16a10.66 10.66 0 0113.87-16.19L187.82 86l22.47-28.57a10.66 10.66 0 0116.77 13.18z"></path><path class="fill-primary" d="M173.87 175.89c-2.56-1.28-5.23-2.67-8-4.37a20.31 20.31 0 018 4.37z"></path><path class="fill-primary" d="M192 234.67h-24v-22.93a21.33 21.33 0 10-16 0v22.93h-24V149a10.67 10.67 0 10-21.34 0v85.65H85.33V200a8 8 0 00-8-8H50.66a8 8 0 00-8 8v34.67H21.33V69.33H96a10.68 10.68 0 0010.67-10.67V40A18.7 18.7 0 0088 21.31H74.67V10.67a10.67 10.67 0 00-21.34 0v10.67H40A18.69 18.69 0 0021.33 40v8A21.36 21.36 0 000 69.33v176A10.66 10.66 0 0010.67 256H192a10.67 10.67 0 100-21.33z"></path><path class="fill-primary" d="M77.33 144H50.66a8 8 0 000 16h26.67a8 8 0 000-16zm0-64H50.66a8 8 0 000 16h26.67a8 8 0 000-16zm0 32H50.66a8 8 0 000 16h26.67a8 8 0 000-16z"></path></g></svg>
+              </div>
+              <div>
+                <h4 class="!mb-1">Medical Insurance</h4>
+                <p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
+              </div>
+            </div>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
+            <div class="flex flex-row">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.98 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/alarm.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#3f78e0]  !mr-4"><path class="fill-secondary" d="M26.64 256a10.66 10.66 0 01-8.26-17.4l23.33-28.67a10.67 10.67 0 1116.55 13.47l-23.33 28.67a10.65 10.65 0 01-8.29 3.93zm202.69 0a10.65 10.65 0 01-8.29-3.93l-23.33-28.67a10.67 10.67 0 0116.55-13.47l23.32 28.67a10.66 10.66 0 01-8.25 17.4zM10.66 72a10.66 10.66 0 01-7.54-18.2L53.79 3.13a10.67 10.67 0 0115.09 15.08L18.21 68.88A10.68 10.68 0 0110.66 72zm234.65 0a10.55 10.55 0 01-7.53-3.12L187.1 18.21a10.67 10.67 0 1115.09-15.08l50.67 50.67a10.66 10.66 0 01-7.55 18.2z"></path><path class="fill-primary" d="M128 32a112 112 0 10112 112A112.12 112.12 0 00128 32zm66.68 122.68H128A10.68 10.68 0 01117.31 144V80a10.68 10.68 0 0121.35 0v53.33h56a10.68 10.68 0 010 21.35z"></path></svg>
+              </div>
+              <div>
+                <h4 class="!mb-1">Flexible Hours</h4>
+                <p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
+              </div>
+            </div>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
+            <div class="flex flex-row">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/employees.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#3f78e0]  !mr-4"><path class="fill-secondary" d="M72.11 86.51l-3.52-21 1.41-1.4-4.36-4.48a24.12 24.12 0 01-5.78-24.43c.11-.32.2-.53.32-.85l-1.4-.21-9-18.88a8 8 0 00-14.49 0l-8.88 19-19.69 3.07a8 8 0 00-6.29 5.44 7.94 7.94 0 001.92 8.11l14.51 14.83-3.42 21A8.07 8.07 0 0021.33 96a8.33 8.33 0 004-1l17.49-9.81 17.6 9.6a8.2 8.2 0 008.53-.43 8 8 0 003.21-7.89zm183.46-44.06a7.85 7.85 0 00-6.4-5.33l-19.73-3-9-18.88a8 8 0 00-14.5 0l-8.86 19-1.17.21c0 .11.11.21.11.32a23.76 23.76 0 01-5.44 24.32L185.81 64l1.71 1.71-3.41 21A8.07 8.07 0 00192 96a8.33 8.33 0 004-1l17.49-9.81 17.6 9.6a8.2 8.2 0 008.53-.43 8.06 8.06 0 003.2-7.89l-3.52-21 14.51-14.92a8.09 8.09 0 001.81-8.13z"></path><path class="fill-primary" d="M100.18 106.67a8 8 0 01-7.91-9.25l4.61-28.8L77 48.37a8 8 0 014.46-13.51l27.09-4.22 12.11-26a8 8 0 017.2-4.64 8 8 0 017.23 4.58l12.29 25.9 27.12 4.05A8 8 0 01179.09 48l-19.78 20.38 4.8 28.77a8 8 0 01-11.74 8.34l-24.19-13.25-24.12 13.42a7.94 7.94 0 01-3.88 1z"></path><circle class="fill-secondary" cx="42.67" cy="160" r="21.33"></circle><path class="fill-secondary" d="M71.15 196.27A44.71 44.71 0 0053.34 232v2.67H8a8.06 8.06 0 01-8-8v-5.33A29.32 29.32 0 0129.33 192H56a29.13 29.13 0 0115.15 4.27z"></path><circle class="fill-secondary" cx="213.33" cy="160" r="21.33"></circle><path class="fill-secondary" d="M256 221.33v5.33a8.07 8.07 0 01-8 8h-45.33V232a44.69 44.69 0 00-17.81-35.73A29.07 29.07 0 01200 192h26.67A29.32 29.32 0 01256 221.33z"></path><circle class="fill-primary" cx="128" cy="154.67" r="32"></circle><path class="fill-primary" d="M157.33 202.67H98.66A29.35 29.35 0 0069.33 232v16a8 8 0 008 8h101.33a8 8 0 008-8v-16a29.35 29.35 0 00-29.33-29.33z"></path></svg>
+              </div>
+              <div>
+                <h4 class="!mb-1">Amazing Work Culture</h4>
+                <p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
+              </div>
+            </div>
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+        <div class="text-center !mt-10"><a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Join Our Team</a></div>
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#edf2fc]">
+      <div class="container py-[4.5rem] xl:!py-28 lg:!py-28 md:!py-28">
+        <div class="flex flex-wrap mx-[-15px] xl:!mt-[-22.5rem] lg:!mt-[-22.5rem] md:!mt-[-22.5rem] !relative">
+          <div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-8/12 lg:!ml-[16.66666667%] xl:w-8/12 xl:!ml-[16.66666667%] w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
+            <h2 class="!text-[.75rem] uppercase !text-[#3f78e0] !tracking-[0.02rem] !leading-[1.35] !mb-3">Happy Team</h2>
+            <h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10 xl:!px-10 xxl:!px-20">Don't take our word for it. See what our team members say about us.</h3>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+        <div class="itemgrid">
+          <div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]">
+            <div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+              <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+                <div class="card-body p-[40px]">
+                  <span class="ratings  inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
+                  <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
+                    <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis.”</p>
+                    <div class="flex items-center text-left">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te1.jpg" alt="image">
+                      <div class="info !pl-4">
+                        <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
+                        <p class="!mb-0 text-[.85rem]">Financial Analyst</p>
+                      </div>
+                    </div>
+                  </blockquote>
+                </div>
+                <!-- /.card-body -->
+              </div>
+              <!-- /.card -->
+            </div>
+            <!--/column -->
+            <div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+              <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+                <div class="card-body p-[40px]">
+                  <span class="ratings  inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
+                  <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
+                    <p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia.”</p>
+                    <div class="flex items-center text-left">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te2.jpg" alt="image">
+                      <div class="info !pl-4">
+                        <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
+                        <p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
+                      </div>
+                    </div>
+                  </blockquote>
+                </div>
+                <!-- /.card-body -->
+              </div>
+              <!-- /.card -->
+            </div>
+            <!--/column -->
+            <div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+              <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+                <div class="card-body p-[40px]">
+                  <span class="ratings  inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
+                  <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
+                    <p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui.”</p>
+                    <div class="flex items-center text-left">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te3.jpg" alt="image">
+                      <div class="info !pl-4">
+                        <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
+                        <p class="!mb-0 text-[.85rem]">Sales Manager</p>
+                      </div>
+                    </div>
+                  </blockquote>
+                </div>
+                <!-- /.card-body -->
+              </div>
+              <!-- /.card -->
+            </div>
+            <!--/column -->
+            <div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+              <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+                <div class="card-body p-[40px]">
+                  <span class="ratings  inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
+                  <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
+                    <p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor.”</p>
+                    <div class="flex items-center text-left">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te4.jpg" alt="image">
+                      <div class="info !pl-4">
+                        <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
+                        <p class="!mb-0 text-[.85rem]">Financial Analyst</p>
+                      </div>
+                    </div>
+                  </blockquote>
+                </div>
+                <!-- /.card-body -->
+              </div>
+              <!-- /.card -->
+            </div>
+            <!--/column -->
+            <div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+              <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+                <div class="card-body p-[40px]">
+                  <span class="ratings  inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
+                  <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
+                    <p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio.”</p>
+                    <div class="flex items-center text-left">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te5.jpg" alt="image">
+                      <div class="info !pl-4">
+                        <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Jackie Sanders</h5>
+                        <p class="!mb-0 text-[.85rem]">Investment Planner</p>
+                      </div>
+                    </div>
+                  </blockquote>
+                </div>
+                <!-- /.card-body -->
+              </div>
+              <!-- /.card -->
+            </div>
+            <!--/column -->
+            <div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+              <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+                <div class="card-body p-[40px]">
+                  <span class="ratings  inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
+                  <blockquote class="!text-[0.85rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
+                    <p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient.”</p>
+                    <div class="flex items-center text-left">
+                      <img class="!rounded-[50%] !w-[3.5rem]" src="assets/img/avatars/te6.jpg" alt="image">
+                      <div class="info !pl-4">
+                        <h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Laura Widerski</h5>
+                        <p class="!mb-0 text-[.85rem]">Sales Specialist</p>
+                      </div>
+                    </div>
+                  </blockquote>
+                </div>
+                <!-- /.card-body -->
+              </div>
+              <!-- /.card -->
+            </div>
+            <!--/column -->
+          </div>
+          <!-- /.row -->
+        </div>
+        <!-- /.grid-view -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px] !text-center">
+          <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <h2 class="!text-[.75rem] uppercase !text-[#3f78e0] !tracking-[0.02rem] !leading-[1.35] !mb-3">Job Positions</h2>
+            <h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10 xxl:!px-20">We’re always searching for amazing people to join our team. Take a look at our current openings.</h3>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+        <div class="flex flex-wrap mx-[-15px] !mt-[-30px]">
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+            <a href="#" class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full">
+              <div class="card-body p-5 flex flex-row">
+                <div>
+                  <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(226,98,107)] opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">SD</span>
+                </div>
+                <div>
+                  <span class="badge bg-[#e0e9fa] !text-[#3f78e0] rounded py-1 !mb-2">Full Time</span>
+                  <h4 class="!mb-1">Senior Graphic Designer</h4>
+                  <p class="!mb-0 !text-[#60697b]">San Francisco, US</p>
+                </div>
+              </div>
+            </a>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+            <a href="#" class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full">
+              <div class="card-body p-5 flex flex-row">
+                <div>
+                  <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(69,196,160)] opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">UX</span>
+                </div>
+                <div>
+                  <span class="badge bg-[#e4f1f6] !text-[#54a8c7] rounded py-1 !mb-2">Remote</span>
+                  <h4 class="!mb-1">UI/UX Designer</h4>
+                  <p class="!mb-0 !text-[#60697b]">Anywhere</p>
+                </div>
+              </div>
+            </a>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+            <a href="#" class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full">
+              <div class="card-body p-5 flex flex-row">
+                <div>
+                  <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(250,183,88)] opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">AN</span>
+                </div>
+                <div>
+                  <span class="badge bg-[#e0e9fa] !text-[#3f78e0] rounded py-1 !mb-2">Full Time</span>
+                  <h4 class="!mb-1">Multimedia Artist &amp; Animator</h4>
+                  <p class="!mb-0 !text-[#60697b]">Birmingham, UK</p>
+                </div>
+              </div>
+            </a>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+            <a href="#" class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full">
+              <div class="card-body p-5 flex flex-row">
+                <div>
+                  <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(116,126,209)] opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">FD</span>
+                </div>
+                <div>
+                  <span class="badge bg-[#f0eaf6] !text-[#a07cc5] rounded py-1 !mb-2">Part Time</span>
+                  <h4 class="!mb-1">Front End Developer</h4>
+                  <p class="!mb-0 !text-[#60697b]">Sydney, AU</p>
+                </div>
+              </div>
+            </a>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+            <a href="#" class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full">
+              <div class="card-body p-5 flex flex-row">
+                <div>
+                  <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(247,139,119)] opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">MD</span>
+                </div>
+                <div>
+                  <span class="badge bg-[#e0e9fa] !text-[#3f78e0] rounded py-1 !mb-2">Full Time</span>
+                  <h4 class="!mb-1">Mobile Developer</h4>
+                  <p class="!mb-0 !text-[#60697b]">San Francisco, US</p>
+                </div>
+              </div>
+            </a>
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
+            <a href="#" class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full">
+              <div class="card-body p-5 flex flex-row">
+                <div>
+                  <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] !bg-[rgba(209,107,134)] !opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">ND</span>
+                </div>
+                <div>
+                  <span class="badge bg-[#e0e9fa] !text-[#3f78e0] rounded py-1 !mb-2">Full Time</span>
+                  <h4 class="!mb-1">.NET Developer</h4>
+                  <p class="!mb-0 !text-[#60697b]">Manchester, UK</p>
+                </div>
+              </div>
+            </a>
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+        <div class="flex flex-wrap mx-[-15px] !mt-[3rem]">
+          <div class="lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
+            <h2 class="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-3">Can't find the right position?</h2>
+            <p class="lead text-[0.9rem] font-medium !leading-[1.65] !mb-5 xl:!px-3 lg:!px-3 md:!px-24">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur.</p>
+            <a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Get in Touch</a>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#edf2fc]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="lg:w-11/12 xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
+            <h2 class="!text-[.75rem] uppercase !text-[#3f78e0] !tracking-[0.02rem] !leading-[1.35] !mb-3">FAQ</h2>
+            <h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10 lg:!px-14 xl:!px-10 xxl:!px-20">If you don't see an answer to your question, you can send us an email from our contact form.</h3>
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <div id="accordion-3" class="accordion-wrapper">
+              <div class="card accordion-item !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5">
+                <div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 bg-inherit" id="accordion-heading-3-1">
+                  <button class="text-[#343f52] !text-[0.9rem] hover:!text-[#3f78e0] before:!text-[#3f78e0] collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-3-1" aria-expanded="false" aria-controls="accordion-collapse-3-1">How do I get my subscription receipt?</button>
+                </div>
+                <!-- /.card-header -->
+                <div id="accordion-collapse-3-1" class="collapse" aria-labelledby="accordion-heading-3-1" data-bs-target="#accordion-3">
+                  <div class="card-body flex-[1_1_auto]  p-[0_1.25rem_.25rem_2.35rem]">
+                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis.</p>
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.collapse -->
+              </div>
+              <!-- /.card -->
+              <div class="card accordion-item !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5">
+                <div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 bg-inherit" id="accordion-heading-3-2">
+                  <button class="text-[#343f52] !text-[0.9rem] hover:!text-[#3f78e0] before:!text-[#3f78e0] collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-3-2" aria-expanded="false" aria-controls="accordion-collapse-3-2">Are there any discounts for people in need?</button>
+                </div>
+                <!-- /.card-header -->
+                <div id="accordion-collapse-3-2" class="collapse" aria-labelledby="accordion-heading-3-2" data-bs-target="#accordion-3">
+                  <div class="card-body flex-[1_1_auto]  p-[0_1.25rem_.25rem_2.35rem]">
+                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis.</p>
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.collapse -->
+              </div>
+              <!-- /.card -->
+              <div class="card accordion-item !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5">
+                <div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 bg-inherit" id="accordion-heading-3-3">
+                  <button class="text-[#343f52] !text-[0.9rem] hover:!text-[#3f78e0] before:!text-[#3f78e0] collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-3-3" aria-expanded="false" aria-controls="accordion-collapse-3-3">Do you offer a free trial edit?</button>
+                </div>
+                <!-- /.card-header -->
+                <div id="accordion-collapse-3-3" class="collapse" aria-labelledby="accordion-heading-3-3" data-bs-target="#accordion-3">
+                  <div class="card-body flex-[1_1_auto]  p-[0_1.25rem_.25rem_2.35rem]">
+                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis.</p>
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.collapse -->
+              </div>
+              <!-- /.card -->
+              <div class="card accordion-item !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5">
+                <div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 bg-inherit" id="accordion-heading-3-4">
+                  <button class="text-[#343f52] !text-[0.9rem] hover:!text-[#3f78e0] before:!text-[#3f78e0] collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-3-4" aria-expanded="false" aria-controls="accordion-collapse-3-4">How do I reset my Account password?</button>
+                </div>
+                <!-- /.card-header -->
+                <div id="accordion-collapse-3-4" class="collapse" aria-labelledby="accordion-heading-3-4" data-bs-target="#accordion-3">
+                  <div class="card-body flex-[1_1_auto]  p-[0_1.25rem_.25rem_2.35rem]">
+                    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis.</p>
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.collapse -->
+              </div>
+              <!-- /.card -->
+            </div>
+            <!-- /.accordion-wrapper -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/career by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:26 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/career2.html b/public/html/career2.html
new file mode 100644
index 0000000..ef50171
--- /dev/null
+++ b/public/html/career2.html
@@ -0,0 +1,964 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/career2 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:26 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item dropdown language-select uppercase group">
+                <a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
+                <ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
+                </ul>
+              </li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+    </header>
+    <!-- /header -->
+    <section class="wrapper !bg-[#edf2fc] !relative">
+      <div class="container pt-10 pb-28 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] !text-center">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-5">
+            <h1 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.3]">Join Our Team</h1>
+            <h3 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-6">Join our team to help shape the future of development.</h3>
+            <a href="#" class="btn btn-lg btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Explore Positions</a>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+      <div class="overflow-hidden">
+        <div class="divider !text-[#fefefe] mx-[-0.5rem]">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60">
+            <path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z" />
+          </svg>
+        </div>
+      </div>
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#ffffff]">
+      <div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
+        <div class="flex flex-wrap mx-[-12.5px] !mt-[-8rem] xl:!mt-[-9rem] lg:!mt-[-9rem] md:!mt-[-9rem]">
+          <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
+            <div class="card lift">
+              <div class="card-body p-[40px]">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.1 256.01" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/target.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#3f78e0]  !mb-3"><path class="fill-secondary" d="M178.66 79.37L166.93 91.1a76.68 76.68 0 014.91 11.52 85.77 85.77 0 0114.93-1.28h1.39a93.65 93.65 0 00-9.5-21.97zM0 128a96.1 96.1 0 00109.65 95 82.93 82.93 0 01-5.65-15.42 67 67 0 01-8 .43A80 80 0 0196 48a79 79 0 0137 9.17l11.73-11.73A94.73 94.73 0 0096 32a96.14 96.14 0 00-96 96z"></path><path class="fill-secondary" d="M37.33 128A58.78 58.78 0 0096 186.68a47.26 47.26 0 005.44-.32A82.71 82.71 0 01103 170a37.32 37.32 0 01-7 .64 42.67 42.67 0 010-85.34 32.88 32.88 0 018 .84l12.91-12.91a57 57 0 00-20.91-4A58.81 58.81 0 0037.33 128z"></path><path class="fill-secondary" d="M96 106.68A21.33 21.33 0 10117.33 128 21.39 21.39 0 0096 106.68zm0 26.66a5.33 5.33 0 115.33-5.33 5.28 5.28 0 01-5.33 5.33z"></path><path class="fill-primary" d="M96.1 136a8 8 0 01-5.67-13.65L159.76 53a8 8 0 0111.31 11.31l-69.33 69.33A8 8 0 0196.1 136z"></path><path class="fill-primary" d="M194.77 64H168.1a8 8 0 01-8-8V29.34a8.08 8.08 0 012.33-5.67l21.33-21.33A8 8 0 01197.42 8v18.68h18.68a8 8 0 015.66 13.66l-21.33 21.33a8 8 0 01-5.66 2.33zm-8 53.34a69.34 69.34 0 1069.33 69.34 69.4 69.4 0 00-69.33-69.34zm29.87 56.11L182 210.78a8 8 0 01-11.09.64l-18.67-16a8 8 0 1110.41-12.15l12.84 11 29.44-31.69a8 8 0 0111.74 10.88z"></path></svg>
+                <h4>Career Growth</h4>
+                <p class="!mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
+            <div class="card lift">
+              <div class="card-body p-[40px]">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/videocall.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#3f78e0]  !mb-3"><g data-name="Layer 2"><path class="fill-secondary" d="M256 21.33v160a21.39 21.39 0 01-21.33 21.33H186a55.9 55.9 0 00-55.36-48H128V149a63.52 63.52 0 0016-22.08v27.73h96V29.33A13.33 13.33 0 00226.67 16h-69.33A13.33 13.33 0 00144 29.33v46.72a62.68 62.68 0 00-16-22.19V21.33A21.39 21.39 0 01149.33 0h85.33A21.4 21.4 0 01256 21.33z"></path><path class="fill-secondary" d="M192 85.33a16 16 0 1116-16 16 16 0 01-16 16zM216 128h-48a8 8 0 01-8-8 24 24 0 0124-24h16a24 24 0 0124 24 8 8 0 01-8 8z"></path><path class="fill-primary" d="M162.67 256H8a8 8 0 01-8-8v-37.33a40 40 0 0140-40h90.67a40 40 0 0140 40V248a8 8 0 01-8 8zM38.4 91.73a1.8 1.8 0 01.11-.75 48 48 0 0193.76.32c0 .11.11.32.11.43s-.32.11-.43.11C114 96.64 102.4 77.12 102 76.27a5.32 5.32 0 00-3.84-2.56 5.42 5.42 0 00-4.48 1.39c-22.62 21-52.81 17-55.26 16.63z"></path><path class="fill-primary" d="M126.08 103.25c-14.4 0-24.64-10-29.76-16.43-24.32 19.08-53 16.32-58.88 15.56a21.89 21.89 0 00.21 4.6 48 48 0 0095.36-.32 18.89 18.89 0 00.21-4.28 26.93 26.93 0 01-7.14.87z"></path></g></svg>
+                <h4>Work From Anywhere</h4>
+                <p class="!mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
+            <div class="card lift">
+              <div class="card-body p-[40px]">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 234.67" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/wallet.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#3f78e0]  !mb-3"><path class="fill-secondary" d="M184.21 42.75L161.57 4a8 8 0 00-4.91-3.76 8.1 8.1 0 00-6.12.9L81.31 42.66z"></path><path class="fill-primary" d="M32 53.33A10.67 10.67 0 0132 32h36l35.63-21.33H32A32 32 0 00.53 37.33 10.9 10.9 0 000 40v162.67a32.09 32.09 0 0032 32h181.33a21.39 21.39 0 0021.33-21.32V192H208a48 48 0 110-96h26.67V74.69a21.39 21.39 0 00-21.33-21.33H32zM202.67 32a21.3 21.3 0 00-18.45-21.12l18.45 31.79z"></path><path class="fill-secondary" d="M248 112h-40a32 32 0 000 64h40a8 8 0 008-8v-48a8 8 0 00-8-8zm-40 42.66A10.67 10.67 0 11218.67 144 10.68 10.68 0 01208 154.66z"></path></svg>
+                <h4>Smart Salary</h4>
+                <p class="!mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </div>
+          <!--/column -->
+          <div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
+            <div class="card lift">
+              <div class="card-body p-[40px]">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.98 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/alarm.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#3f78e0]  !mb-3"><path class="fill-secondary" d="M26.64 256a10.66 10.66 0 01-8.26-17.4l23.33-28.67a10.67 10.67 0 1116.55 13.47l-23.33 28.67a10.65 10.65 0 01-8.29 3.93zm202.69 0a10.65 10.65 0 01-8.29-3.93l-23.33-28.67a10.67 10.67 0 0116.55-13.47l23.32 28.67a10.66 10.66 0 01-8.25 17.4zM10.66 72a10.66 10.66 0 01-7.54-18.2L53.79 3.13a10.67 10.67 0 0115.09 15.08L18.21 68.88A10.68 10.68 0 0110.66 72zm234.65 0a10.55 10.55 0 01-7.53-3.12L187.1 18.21a10.67 10.67 0 1115.09-15.08l50.67 50.67a10.66 10.66 0 01-7.55 18.2z"></path><path class="fill-primary" d="M128 32a112 112 0 10112 112A112.12 112.12 0 00128 32zm66.68 122.68H128A10.68 10.68 0 01117.31 144V80a10.68 10.68 0 0121.35 0v53.33h56a10.68 10.68 0 010 21.35z"></path></svg>
+                <h4>Flexible Hours</h4>
+                <p class="!mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+        <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] items-center !mt-[70px]">
+          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[80px]">
+            <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
+              <div class="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
+                <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="assets/img/photos/g8.jpg" alt="image"></figure>
+              </div>
+              <!--/column -->
+              <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g9.jpg" alt="image"></figure>
+              </div>
+              <!--/column -->
+              <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
+                <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="assets/img/photos/g10.jpg" alt="image"></figure>
+              </div>
+              <!--/column -->
+            </div>
+            <!--/.row -->
+          </div>
+          <!--/column -->
+          <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[80px]">
+            <h2 class="!text-[0.8rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem]">What Makes Us Different?</h2>
+            <h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !mb-5">We bring solutions to make life easier for our customers.</h3>
+            <p class="!mb-6">Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed.</p>
+            <div class="flex flex-wrap mx-[-15px] !mt-[-40px]">
+              <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px]">
+                <div class="flex flex-row">
+                  <div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.98 245.34" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/share.svg" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem]  solid-mono text-[#3f78e0]  !mr-4"><g data-name="Layer 2"><path class="fill-secondary" d="M219.1 108.48v7.68A11.89 11.89 0 01207.15 128h-19.63c-5.76 0-12-4.27-12-13.76v-5.76zm26.24-60.8a47.26 47.26 0 01-17.6 36.91 22.89 22.89 0 00-8.32 13.23h-44.06a20 20 0 00-7.79-12.69 47.13 47.13 0 01-18.24-38.4C149.86 21.34 171.09.33 196.58 0a47.34 47.34 0 0134.56 13.88 46.83 46.83 0 0114.2 33.79z"></path><path class="fill-primary" d="M5.25 117.34A5.34 5.34 0 000 122.67v98.64A2.68 2.68 0 002.67 224H28a5.33 5.33 0 005.13-3.87l23.6-83.18A10.66 10.66 0 0050.1 124c-9.67-3.52-24.5-7-44.85-6.66zM234.67 176c-21.33 0-64 27-85.33 27S104 186.65 104 186.65s28.74 5.35 45.33 5.35 21.33-5.66 21.33-13.33c0-18.67-31.72-21.56-47.75-24-15.74-8.76-23.92-15.69-50-17.9a28.85 28.85 0 01-.81 4.54l-21.43 75.5c24.27 11 66.05 28.53 88 28.53 32 0 117.32-42.67 117.32-53.33S245.33 176 234.67 176z"></path></g></svg>
+                  </div>
+                  <div>
+                    <h4 class="!mb-1">Our Mission</h4>
+                    <p class="!mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
+                  </div>
+                </div>
+              </div>
+              <!--/column -->
+              <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px]">
+                <div class="flex flex-row">
+                  <div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 234.72" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/partnership.svg" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem]  solid-mono text-[#3f78e0]  !mr-4"><g data-name="Layer 2"><path class="fill-primary" d="M5.25 106.72A5.34 5.34 0 000 112.05v98.64a2.68 2.68 0 002.67 2.67H28a5.33 5.33 0 005.13-3.87L56.7 126.3a10.66 10.66 0 00-6.6-12.92c-9.67-3.52-24.5-7-44.85-6.66zm229.42 58.64c-21.33 0-64 27-85.33 27S104 176 104 176s28.74 5.33 45.33 5.33 21.33-5.66 21.33-13.33c0-18.67-31.72-21.57-47.75-24-15.74-8.77-23.92-15.69-50-17.9a28.85 28.85 0 01-.81 4.54l-21.43 75.55c24.27 11 66.05 28.53 88 28.53 32 0 117.32-42.67 117.32-53.33s-10.65-16-21.31-16z"></path><path class="fill-secondary" d="M250.75 128a5.34 5.34 0 005.25-5.33V24a2.68 2.68 0 00-2.67-2.67H228a5.33 5.33 0 00-5.13 3.87l-23.6 83.19a10.66 10.66 0 006.6 12.92c9.7 3.55 24.53 7.04 44.88 6.69zM21.33 69.36c21.33 0 64-27 85.33-27S152 58.69 152 58.69s-28.72-5.33-45.31-5.33S85.34 59 85.34 66.69c0 18.67 31.72 21.57 47.75 24 15.74 8.77 23.92 15.69 50 17.9a28.85 28.85 0 01.81-4.54l21.43-75.52C181.06 17.49 139.28 0 117.34 0 85.33 0 0 42.69 0 53.36s10.67 16 21.33 16z"></path></g></svg>
+                  </div>
+                  <div>
+                    <h4 class="!mb-1">Our Values</h4>
+                    <p class="!mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
+                  </div>
+                </div>
+              </div>
+              <!--/column -->
+            </div>
+            <!--/.row -->
+          </div>
+          <!--/column -->
+        </div>
+        <!--/.row -->
+        <hr class="!my-14 xl:!my-28 lg:!my-28 md:!my-28">
+        <div class="flex flex-wrap mx-[-15px] !text-center">
+          <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">Job Positions</h2>
+            <h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10 xxl:!px-20">We’re always searching for amazing people to join our team. Take a look at our current openings.</h3>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <form class="filter-form !mb-10">
+              <div class="flex flex-wrap mx-[-15px]">
+                <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-3">
+                  <div class="form-select-wrapper">
+                    <select class="form-select" aria-label="">
+                      <option selected>Position</option>
+                      <option value="position1">Business</option>
+                      <option value="position2">Design</option>
+                      <option value="position3">Development</option>
+                      <option value="position4">Engineering</option>
+                      <option value="position5">Finance</option>
+                      <option value="position6">Marketing</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-3">
+                  <div class="form-select-wrapper">
+                    <select class="form-select" aria-label="">
+                      <option selected>Type</option>
+                      <option value="type1">Full-time</option>
+                      <option value="type3">Part-time</option>
+                      <option value="type4">Remote</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-3">
+                  <div class="form-select-wrapper">
+                    <select class="form-select" aria-label="">
+                      <option selected>Location</option>
+                      <option value="location1">Chicago, US</option>
+                      <option value="location3">Michigan, US</option>
+                      <option value="location2">New York, US</option>
+                      <option value="location4">Los Angles, US</option>
+                      <option value="location5">Moscow, Russia</option>
+                      <option value="location6">Sydney, Australia</option>
+                      <option value="location7">Birmingham, UK</option>
+                      <option value="location8">Manchester, UK</option>
+                      <option value="location9">Beijing, China</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <div class="job-list !mb-10">
+              <h3 class="!mb-4">Design</h3>
+              <a href="#" class="card !mb-4 lift">
+                <div class="card-body p-5">
+                  <span class="flex flex-wrap mx-[-15px] justify-between items-center">
+                    <span class="xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0 flex items-center !text-[#60697b]">
+                      <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(226,98,107)] opacity-100 !text-white !w-9 !h-9 text-[0.85rem] !mr-3">GD</span> Senior Graphic Designer </span>
+                    <span class="w-5/12 xl:w-3/12 lg:w-3/12 md:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-clock !mr-[.25rem] before:content-['\e9ee']"></i> Full time </span>
+                    <span class="w-7/12 md:w-4/12 lg:w-3/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-location-arrow !mr-[.25rem] before:content-['\ebd9']"></i> San Francisco, US </span>
+                    <span class="hidden xl:block lg:block w-1/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !text-[#60697b]">
+                      <i class="uil uil-angle-right-b before:content-['\e930']"></i>
+                    </span>
+                  </span>
+                </div>
+                <!-- /.card-body -->
+              </a>
+              <!-- /.card -->
+              <a href="#" class="card !mb-4 lift">
+                <div class="card-body p-5">
+                  <span class="flex flex-wrap mx-[-15px] justify-between items-center">
+                    <span class="xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0 flex items-center !text-[#60697b]">
+                      <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(69,196,160)] opacity-100 !text-white !w-9 !h-9 text-[0.85rem] !mr-3">UX</span> UI/UX Designer </span>
+                    <span class="w-5/12 xl:w-3/12 lg:w-3/12 md:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-clock !mr-[.25rem] before:content-['\e9ee']"></i> Remote </span>
+                    <span class="w-7/12 md:w-4/12 lg:w-3/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-location-arrow !mr-[.25rem] before:content-['\ebd9']"></i> Anywhere </span>
+                    <span class="hidden xl:block lg:block w-1/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !text-[#60697b]">
+                      <i class="uil uil-angle-right-b before:content-['\e930']"></i>
+                    </span>
+                  </span>
+                </div>
+                <!-- /.card-body -->
+              </a>
+              <!-- /.card -->
+              <a href="#" class="card !mb-4 lift">
+                <div class="card-body p-5">
+                  <span class="flex flex-wrap mx-[-15px] justify-between items-center">
+                    <span class="xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0 flex items-center !text-[#60697b]">
+                      <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(250,183,88)] opacity-100 !text-white !w-9 !h-9 text-[0.85rem] !mr-3">AN</span> Multimedia Artist &amp; Animator </span>
+                    <span class="w-5/12 xl:w-3/12 lg:w-3/12 md:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-clock !mr-[.25rem] before:content-['\e9ee']"></i> Full time </span>
+                    <span class="w-7/12 md:w-4/12 lg:w-3/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-location-arrow !mr-[.25rem] before:content-['\ebd9']"></i> Birmingham, UK </span>
+                    <span class="hidden xl:block lg:block w-1/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !text-[#60697b]">
+                      <i class="uil uil-angle-right-b before:content-['\e930']"></i>
+                    </span>
+                  </span>
+                </div>
+                <!-- /.card-body -->
+              </a>
+              <!-- /.card -->
+            </div>
+            <div class="job-list">
+              <h3 class="!mb-4">Development</h3>
+              <a href="#" class="card !mb-4 lift">
+                <div class="card-body p-5">
+                  <span class="flex flex-wrap mx-[-15px] justify-between items-center">
+                    <span class="xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0 flex items-center !text-[#60697b]">
+                      <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(116,126,209)] opacity-100 !text-white !w-9 !h-9 text-[0.85rem] !mr-3">FE</span> Front End Developer </span>
+                    <span class="w-5/12 xl:w-3/12 lg:w-3/12 md:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-clock !mr-[.25rem] before:content-['\e9ee']"></i> Part time </span>
+                    <span class="w-7/12 md:w-4/12 lg:w-3/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-location-arrow !mr-[.25rem] before:content-['\ebd9']"></i> Sydney, AU </span>
+                    <span class="hidden xl:block lg:block w-1/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !text-[#60697b]">
+                      <i class="uil uil-angle-right-b before:content-['\e930']"></i>
+                    </span>
+                  </span>
+                </div>
+                <!-- /.card-body -->
+              </a>
+              <!-- /.card -->
+              <a href="#" class="card !mb-4 lift">
+                <div class="card-body p-5">
+                  <span class="flex flex-wrap mx-[-15px] justify-between items-center">
+                    <span class="xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0 flex items-center !text-[#60697b]">
+                      <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(247,139,119)] opacity-100 !text-white !w-9 !h-9 text-[0.85rem] !mr-3">MD</span> Mobile Developer </span>
+                    <span class="w-5/12 xl:w-3/12 lg:w-3/12 md:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-clock !mr-[.25rem] before:content-['\e9ee']"></i> Full-time </span>
+                    <span class="w-7/12 md:w-4/12 lg:w-3/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-location-arrow !mr-[.25rem] before:content-['\ebd9']"></i> San Francisco, US </span>
+                    <span class="hidden xl:block lg:block w-1/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !text-[#60697b]">
+                      <i class="uil uil-angle-right-b before:content-['\e930']"></i>
+                    </span>
+                  </span>
+                </div>
+                <!-- /.card-body -->
+              </a>
+              <!-- /.card -->
+              <a href="#" class="card !mb-4 lift">
+                <div class="card-body p-5">
+                  <span class="flex flex-wrap mx-[-15px] justify-between items-center">
+                    <span class="xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0 flex items-center !text-[#60697b]">
+                      <span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] !bg-[rgba(209,107,134)] !opacity-100 !text-white !w-9 !h-9 text-[0.85rem] !mr-3">NT</span> .NET Developer </span>
+                    <span class="w-5/12 xl:w-3/12 lg:w-3/12 md:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-clock !mr-[.25rem] before:content-['\e9ee']"></i> Full time </span>
+                    <span class="w-7/12 md:w-4/12 lg:w-3/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
+                      <i class="uil uil-location-arrow !mr-[.25rem] before:content-['\ebd9']"></i> Manchester, UK </span>
+                    <span class="hidden xl:block lg:block w-1/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !text-[#60697b]">
+                      <i class="uil uil-angle-right-b before:content-['\e930']"></i>
+                    </span>
+                  </span>
+                </div>
+                <!-- /.card-body -->
+              </a>
+              <!-- /.card -->
+            </div>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <section class="wrapper !bg-[#edf2fc]">
+      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
+            <h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">Can't find the right position?</h2>
+            <h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-7 lg:!px-5 xl:!px-0 xxl:!px-5">We are a community with 5000+ team members. Join and build the future with us.</h3>
+            <a href="#" class="btn btn-lg btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Contact Us</a>
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/career2 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:26 GMT -->
+</html>
\ No newline at end of file
diff --git a/public/html/terms.html b/public/html/terms.html
new file mode 100644
index 0000000..b1e2ebe
--- /dev/null
+++ b/public/html/terms.html
@@ -0,0 +1,786 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/terms by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:29 GMT -->
+<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
+  <meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
+  <meta name="author" content="elemis">
+  <title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
+  <link rel="shortcut icon" href="assets/img/favicon.png">
+	<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
+  <link rel="stylesheet" href="assets/css/plugins.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="grow shrink-0">
+    <header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
+        <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
+          <div class="navbar-brand w-full">
+            <a href='index.html'>
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </a>
+          </div>
+          <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+            <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
+              
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              <ul class="navbar-nav">
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content mega-menu-scroll">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo1.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 1</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo2.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 2</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo3.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 3</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo4.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 4</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo5.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 5</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo6.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 6</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo7.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 7</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo8.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 8</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo9.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 9</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo10.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 10</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo11.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 11</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo12.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 12</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo13.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 13</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo14.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 14</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo15.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 15</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo16.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 16</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo17.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 17</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo18.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 18</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo19.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 19</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo20.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 20</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo21.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 21</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo22.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 22</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo23.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 23</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo24.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 24</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo25.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 25</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo26.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 26</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo27.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 27</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo28.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 28</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo29.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 29</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo30.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 30</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo31.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 31</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo32.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 32</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo33.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 33</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
+                          <a class='dropdown-item' href='demo34.html'>
+                            <figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
+                            <span class="xl:!hidden lg:!hidden">Demo 34</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                      <span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
+                  <ul class="dropdown-menu">
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
+                      </ul>
+                    </li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
+                      </ul>
+                    </li>
+                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
+                  <div class="dropdown-menu dropdown-lg">
+                    <div class="dropdown-lg-content">
+                      <div>
+                        <h6 class="dropdown-header">Project Pages</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
+                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
+                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
+                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                      <div>
+                        <h6 class="dropdown-header">Single Projects</h6>
+                        <ul class="pl-0 list-none">
+                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
+                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
+                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
+                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
+                        </ul>
+                      </div>
+                      <!-- /.column -->
+                    </div>
+                    <!-- /auto-column -->
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
+                  <ul class="dropdown-menu">
+                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
+                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
+                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                      <ul class="dropdown-menu">
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
+                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
+                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                    <li class="mega-menu-content">
+                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                            <span>About</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                            <span>Blog</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                            <span>Call to Action</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                            <span>Clients</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                            <span>Contact</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                            <span>Facts</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                            <span>FAQ</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                            <span>Features</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                            <span>Footer</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                            <span>Hero</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                            <span>Misc</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                            <span>Navbar</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                            <span>Portfolio</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                            <span>Pricing</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                            <span>Process</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                            <span>Team</span>
+                          </a>
+                        </li>
+                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
+                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                            <span>Testimonials</span>
+                          </a>
+                        </li>
+                      </ul>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+                <li class="nav-item dropdown dropdown-mega">
+                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
+                  <ul class="dropdown-menu mega-menu">
+                    <li class="mega-menu-content">
+                      <div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
+                        <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
+                          <h6 class="dropdown-header">Usage</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2  xl:pb-1 lg:pb-1">
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
+      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
+                          </ul>
+                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
+                          <ul class="pl-0 list-none  xl:columns-2 lg:columns-2 ">
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
+    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                        <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
+                          <h6 class="dropdown-header">Elements</h6>
+                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
+                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
+                          </ul>
+                        </div>
+                        <!--/column -->
+                      </div>
+                      <!--/.row -->
+                    </li>
+                    <!--/.mega-menu-content-->
+                  </ul>
+                  <!--/.dropdown-menu -->
+                </li>
+              </ul>
+              <!-- /.navbar-nav -->
+              <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
+              <!-- /.offcanvas-footer -->
+            </div>
+            <!-- /.offcanvas-body -->
+          </div>
+          <!-- /.navbar-collapse -->
+          <div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item dropdown language-select uppercase group">
+                <a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
+                <ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
+                </ul>
+              </li>
+              <li class="nav-item hidden xl:block lg:block md:block">
+                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+    </header>
+    <!-- /header -->
+    <section class="wrapper bg-soft-primary !bg-[#edf2fc]">
+      <div class="container pt-10 pb-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 !text-center">
+        <div class="flex flex-wrap mx-[-15px]">
+          <div class="md:w-10/12 lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
+            <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">Terms and Conditions</h1>
+            <nav class="inline-block" aria-label="breadcrumb">
+              <ol class="breadcrumb flex flex-wrap bg-[none] !mb-4 p-0 !rounded-none list-none">
+                <li class="breadcrumb-item flex !text-[#60697b]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Home</a></li>
+                <li class="breadcrumb-item active flex !text-[#60697b] !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(96,105,123,.35)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons" aria-current="page">Terms and Conditions</li>
+              </ol>
+            </nav>
+            <!-- /nav -->
+          </div>
+          <!-- /column -->
+        </div>
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </section>
+    <!-- /section -->
+    <div class="container">
+      <div class="flex flex-wrap mx-0">
+        <aside class="xl:w-3/12 w-full flex-[0_0_auto] max-w-full sidebar !sticky h-full top-0 md:!mt-0 py-24 hidden  xl:block">
+          <div class="widget">
+            <nav id="sidebar-nav">
+              <ul class="pl-0 list-none text-inherit">
+<li><a class="nav-link scroll active" href="#terms-conditions">1. Terms & Conditions</a></li>
+<li class="!mt-[0.35rem]"><a class="nav-link scroll" href="#privacy-policy">2. Privacy Policy</a></li>
+<li class="!mt-[0.35rem]"><a class="nav-link scroll" href="#user-policy">3. User Policy</a></li>
+<li class="!mt-[0.35rem]"><a class="nav-link scroll" href="#copyrights">4. Copyrights</a></li>
+<li class="!mt-[0.35rem]"><a class="nav-link scroll" href="#cookies">5. Cookies</a></li>
+<li class="!mt-[0.35rem]"><a class="nav-link scroll" href="#account-billing">6. Account & Billing</a></li>
+              </ul>
+            </nav>
+            <!-- /nav -->
+          </div>
+          <!-- /.widget -->
+        </aside>
+        <!-- /column -->
+        <div class="xl:w-8/12 w-full flex-[0_0_auto] max-w-full">
+          <section id="terms-conditions" class="wrapper pt-24">
+            <div class="card">
+              <div class="card-body !p-10">
+                <h2 class="!mb-3 !leading-[1.35]">1. Terms and Conditions</h2>
+                <p>Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+                <p>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem.</p>
+                <ul class="pl-0 list-none bullet-bg bullet-soft-primary  !mb-0">
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Etiam porta sem malesuada magna mollis euismod.</span></li>
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>
+                </ul>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </section>
+          <section id="privacy-policy" class="wrapper pt-24">
+            <div class="card">
+              <div class="card-body !p-10">
+                <h2 class="!mb-3 !leading-[1.35]">2. Privacy Policy</h2>
+                <p>Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+                <ul class="pl-0 list-none bullet-bg bullet-soft-primary">
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Etiam porta sem malesuada magna mollis euismod.</span></li>
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>
+                </ul>
+                <p class="!mb-0">Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem.</p>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </section>
+          <section id="user-policy" class="wrapper pt-24">
+            <div class="card">
+              <div class="card-body !p-10">
+                <h2 class="!mb-3 !leading-[1.35]">3. User Policy</h2>
+                <p>Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+                <p class="!mb-0">Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem.</p>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </section>
+          <section id="copyrights" class="wrapper pt-24">
+            <div class="card">
+              <div class="card-body !p-10">
+                <h2 class="!mb-3 !leading-[1.35]">4. Copyrights</h2>
+                <p>Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+                <ul class="pl-0 list-none bullet-bg bullet-soft-primary">
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Etiam porta sem malesuada magna mollis euismod.</span></li>
+                  <li class="relative !mt-[0.35rem] flex items-center"><span class="pr-[.75rem]"><i class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>
+                </ul>
+                <p class="!mb-0">Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem.</p>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </section>
+          <section id="cookies" class="wrapper pt-24">
+            <div class="card">
+              <div class="card-body !p-10">
+                <h2 class="!mb-3 !leading-[1.35]">5. Cookies</h2>
+                <p>Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+                <p class="!mb-0">Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem.</p>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </section>
+          <section id="account-billing" class="wrapper py-24">
+            <div class="card">
+              <div class="card-body !p-10">
+                <h2 class="!mb-3 !leading-[1.35]">6. Account & Billing</h2>
+                <p>Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+                <p class="!mb-0">Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem.</p>
+              </div>
+              <!--/.card-body -->
+            </div>
+            <!--/.card -->
+          </section>
+        </div>
+        <!-- /column -->
+      </div>
+      <!-- /.row -->
+    </div>
+    <!-- /.container -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="!bg-[#21262c] shrink-0">
+    <div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
+      <div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <img class="!mb-4" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+            <p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
+            <nav class="nav social social-white">
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+              <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+            </nav>
+            <!-- /.social -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
+            <address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
+            <a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00 (123) 456 78 90
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Learn More</h4>
+            <ul class="pl-0 list-none   !mb-0">
+              <li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
+              <li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+        <div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
+          <div class="widget !text-[#cacaca]">
+            <h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
+            <p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
+            <div class="newsletter-wrapper">
+              <!-- Begin Mailchimp Signup Form -->
+              <div id="mc_embed_signup2">
+                <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
+                  <div id="mc_embed_signup_scroll2">
+                    <div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
+                      <input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none     focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca]   bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)]  " placeholder="" id="mce-EMAIL2">
+                      <label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
+                      <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
+                    </div>
+                    <div id="mce-responses2" class="clear">
+                      <div class="response" id="mce-error-response2" style="display:none"></div>
+                      <div class="response" id="mce-success-response2" style="display:none"></div>
+                    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
+                    <div class="clear"></div>
+                  </div>
+                </form>
+              </div>
+              <!--End mc_embed_signup-->
+            </div>
+            <!-- /.newsletter-wrapper -->
+          </div>
+          <!-- /.widget -->
+        </div>
+        <!-- /column -->
+      </div>
+      <!--/.row -->
+    </div>
+    <!-- /.container -->
+  </footer>
+  <div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
+    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+      <path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
+    </svg>
+  </div>
+  <script src="assets/js/plugins.js"></script>
+  <script src="assets/js/theme.js"></script>
+</body>
+
+
+<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/terms by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:29 GMT -->
+</html>
\ No newline at end of file