/*-----------------------------------------------------------------------------------

    Template Name: template Name

    Version: 1.0

-----------------------------------------------------------------------------------*/
/*! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: "";
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
  tab-size: 4; /* 3 */
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/
button,
[role=button] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 576px) {
  .container {
    max-width: 576px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 992px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}
@media (min-width: 1920px) {
  .container {
    max-width: 1920px;
  }
}
.container {
  max-width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 100%;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 1295px;
  }
}
.visible {
  visibility: visible;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-\[-150px\] {
  bottom: -150px;
}

.bottom-\[-18px\] {
  bottom: -18px;
}

.bottom-\[15px\] {
  bottom: 15px;
}

.bottom-\[200px\] {
  bottom: 200px;
}

.left-0 {
  left: 0px;
}

.left-6 {
  left: 1.5rem;
}

.left-\[-17px\] {
  left: -17px;
}

.left-\[50\%\] {
  left: 50%;
}

.right-0 {
  right: 0px;
}

.right-6 {
  right: 1.5rem;
}

.right-\[15px\] {
  right: 15px;
}

.right-\[40px\] {
  right: 40px;
}

.right-\[5px\] {
  right: 5px;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-\[18px\] {
  top: 18px;
}

.top-\[50\%\] {
  top: 50%;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.z-\[-1\] {
  z-index: -1;
}

.z-\[-2\] {
  z-index: -2;
}

.z-\[1\] {
  z-index: 1;
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.col-span-12 {
  grid-column: span 12/span 12;
}

.col-span-6 {
  grid-column: span 6/span 6;
}

.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.-mr-3 {
  margin-right: -0.75rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-9 {
  margin-bottom: 2.25rem;
}

.mb-\[10px\] {
  margin-bottom: 10px;
}

.mb-\[120px\] {
  margin-bottom: 120px;
}

.mb-\[20px\] {
  margin-bottom: 20px;
}

.mb-\[30px\] {
  margin-bottom: 30px;
}

.mb-\[50px\] {
  margin-bottom: 50px;
}

.mb-\[80px\] {
  margin-bottom: 80px;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-5 {
  margin-left: 1.25rem;
}

.ml-\[10px\] {
  margin-left: 10px;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mr-\[40px\] {
  margin-right: 40px;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-14 {
  margin-top: 3.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-\[-130px\] {
  margin-top: -130px;
}

.mt-\[-280px\] {
  margin-top: -280px;
}

.mt-\[20px\] {
  margin-top: 20px;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-12 {
  height: 3rem;
}

.h-\[100px\] {
  height: 100px;
}

.h-\[55px\] {
  height: 55px;
}

.h-\[90\%\] {
  height: 90%;
}

.h-full {
  height: 100%;
}

.w-12 {
  width: 3rem;
}

.w-3\/6 {
  width: 50%;
}

.w-\[110px\] {
  width: 110px;
}

.w-\[350px\] {
  width: 350px;
}

.w-\[55px\] {
  width: 55px;
}

.w-\[90\%\] {
  width: 90%;
}

.w-full {
  width: 100%;
}

.max-w-\[1075px\] {
  max-width: 1075px;
}

.max-w-\[325px\] {
  max-width: 325px;
}

.max-w-\[416px\] {
  max-width: 416px;
}

.max-w-\[450px\] {
  max-width: 450px;
}

.max-w-\[950px\] {
  max-width: 950px;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.grow {
  flex-grow: 1;
}

.origin-center {
  transform-origin: center;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes animateSpin {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: animateSpin 7s linear infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-9 {
  gap: 2.25rem;
}

.gap-\[18px\] {
  gap: 18px;
}

.gap-\[23px\] {
  gap: 23px;
}

.gap-\[30px\] {
  gap: 30px;
}

.gap-\[60px\] {
  gap: 60px;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

.gap-x-\[55px\] {
  -moz-column-gap: 55px;
  column-gap: 55px;
}

.gap-x-\[80px\] {
  -moz-column-gap: 80px;
  column-gap: 80px;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[20px\] {
  border-radius: 20px;
}

.rounded-\[24px\] {
  border-radius: 24px;
}

.rounded-\[40px\] {
  border-radius: 40px;
}

.rounded-\[8px\] {
  border-radius: 8px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-black-800 {
  --tw-border-opacity: 1;
  border-color: rgb(8 8 8/var(--tw-border-opacity));
}

.border-black-text-100 {
  border-color: rgba(8, 8, 8, 0.1);
}

.border-black-text-400 {
  border-color: rgba(8, 8, 8, 0.4);
}

.border-border-white {
  border-color: rgba(255, 255, 255, 0.2);
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219/var(--tw-border-opacity));
}

.border-opacity-10 {
  --tw-border-opacity: 0.1;
}

.border-opacity-40 {
  --tw-border-opacity: 0.4;
}

.bg-active {
  background-color: rgba(8, 8, 8, 0.95);
}

.bg-black-500 {
  background-color: rgba(8, 8, 8, 0.04);
}

.bg-black-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(8 8 8/var(--tw-bg-opacity));
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(255 182 70/var(--tw-bg-opacity));
}

.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(255 233 217/var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255/var(--tw-bg-opacity));
}

.fill-primary {
  fill: #FFB646;
}

.stroke-black-800 {
  stroke: #080808;
}

.stroke-secondary {
  stroke: #FFE9D9;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[38px\] {
  padding-left: 38px;
  padding-right: 38px;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-9 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.py-\[120px\] {
  padding-top: 120px;
  padding-bottom: 120px;
}

.py-\[6px\] {
  padding-top: 6px;
  padding-bottom: 6px;
}

.py-\[72px\] {
  padding-top: 72px;
  padding-bottom: 72px;
}

.py-\[80px\] {
  padding-top: 80px;
  padding-bottom: 80px;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-7 {
  padding-bottom: 1.75rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-\[120px\] {
  padding-bottom: 120px;
}

.pb-\[125px\] {
  padding-bottom: 125px;
}

.pb-\[60px\] {
  padding-bottom: 60px;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pl-\[20px\] {
  padding-left: 20px;
}

.pl-\[25px\] {
  padding-left: 25px;
}

.pl-\[30px\] {
  padding-left: 30px;
}

.pr-\[45px\] {
  padding-right: 45px;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-\[130px\] {
  padding-top: 130px;
}

.pt-\[140px\] {
  padding-top: 140px;
}

.pt-\[280px\] {
  padding-top: 280px;
}

.pt-\[30px\] {
  padding-top: 30px;
}

.pt-\[45px\] {
  padding-top: 45px;
}

.pt-\[80px\] {
  padding-top: 80px;
}

.text-center {
  text-align: center;
}

.font-Inter {
  font-family: "Inter", sans-serif;
}

.font-Syne {
  font-family: "Syne", sans-serif;
}

.font-sans {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[23px\] {
  font-size: 23px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[44px\] {
  font-size: 44px;
}

.text-\[65px\] {
  font-size: 65px;
}

.text-\[80px\] {
  font-size: 80px;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 14px;
  line-height: 20px;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.\!leading-none {
  line-height: 1 !important;
}

.leading-10 {
  line-height: 2.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-8 {
  line-height: 2rem;
}

.leading-\[1\.277\] {
  line-height: 1.277;
}

.leading-\[64px\] {
  line-height: 64px;
}

.leading-none {
  line-height: 1;
}

.leading-normal {
  line-height: 1.5;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[-1\.5px\] {
  letter-spacing: -1.5px;
}

.text-active {
  color: rgba(8, 8, 8, 0.95);
}

.text-black-700 {
  color: rgba(8, 8, 8, 0.8);
}

.text-black-800 {
  --tw-text-opacity: 1;
  color: rgb(8 8 8/var(--tw-text-opacity));
}

.text-black-text-600 {
  color: rgba(8, 8, 8, 0.6);
}

.text-black-text-800 {
  color: rgba(8, 8, 8, 0.8);
}

.text-orange {
  --tw-text-opacity: 1;
  color: rgb(255 147 48/var(--tw-text-opacity));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(255 182 70/var(--tw-text-opacity));
}

.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(255 233 217/var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity));
}

.opacity-80 {
  opacity: 0.8;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
}

.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);
}

.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);
}

.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);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/*  offcanvas menu style */
body.offcanvas-open {
  overflow-y: hidden;
}

.offcanvas.offcanvas-open {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* offcanvas menu style ENd */
.btn-primary {
  border-radius: 0.5rem;
  border-width: 1px;
  background-color: rgba(8, 8, 8, 0.95);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 15px;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.btn-primary:hover {
  border-color: rgba(8, 8, 8, 0.4);
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(8 8 8/var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .btn-primary {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}
.btn-primary-outline {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgba(8, 8, 8, 0.4);
  background-color: transparent;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 15px;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(8 8 8/var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.btn-primary-outline:hover {
  border-color: rgba(8, 8, 8, 0.95);
  background-color: rgba(8, 8, 8, 0.95);
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .btn-primary-outline {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}
.tab-btn {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255/var(--tw-bg-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 15px;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(8 8 8/var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.tab-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(8 8 8/var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity));
}

@media (min-width: 992px) {
  .tab-btn {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}
.tab-btn.active {
  --tw-bg-opacity: 1;
  background-color: rgb(8 8 8/var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity));
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.paragraph {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.75rem;
  color: rgba(8, 8, 8, 0.6);
}

.strock-text {
  font-family: "Syne", sans-serif;
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -1.5px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity));
  text-shadow: 1px 1px 0 rgba(8, 8, 8, 0.4), -1px -1px 0 rgba(8, 8, 8, 0.4), 1px -1px 0 rgba(8, 8, 8, 0.4), -1px 1px 0 rgba(8, 8, 8, 0.4), 1px 1px 0 rgba(8, 8, 8, 0.4);
}

.featured-properties {
  background-color: rgba(8, 8, 8, 0.04);
}

a {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
}

.success {
  --tw-text-opacity: 1;
  color: rgb(5 235 5/var(--tw-text-opacity));
}

.error {
  --tw-text-opacity: 1;
  color: rgb(220 38 38/var(--tw-text-opacity));
}

.counter:not(.is-visible) {
  visibility: hidden;
}

.placeholder\:text-black-text-600::-moz-placeholder {
  color: rgba(8, 8, 8, 0.6);
}

.placeholder\:text-black-text-600::placeholder {
  color: rgba(8, 8, 8, 0.6);
}

.placeholder\:opacity-100::-moz-placeholder {
  opacity: 1;
}

.placeholder\:opacity-100::placeholder {
  opacity: 1;
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:left-0::before {
  content: var(--tw-content);
  left: 0px;
}

.before\:left-4::before {
  content: var(--tw-content);
  left: 1rem;
}

.before\:left-\[-13px\]::before {
  content: var(--tw-content);
  left: -13px;
}

.before\:left-\[-2px\]::before {
  content: var(--tw-content);
  left: -2px;
}

.before\:left-\[-4px\]::before {
  content: var(--tw-content);
  left: -4px;
}

.before\:left-\[-6px\]::before {
  content: var(--tw-content);
  left: -6px;
}

.before\:left-\[0\]::before {
  content: var(--tw-content);
  left: 0;
}

.before\:left-\[15px\]::before {
  content: var(--tw-content);
  left: 15px;
}

.before\:left-\[18px\]::before {
  content: var(--tw-content);
  left: 18px;
}

.before\:left-\[20px\]::before {
  content: var(--tw-content);
  left: 20px;
}

.before\:left-\[32px\]::before {
  content: var(--tw-content);
  left: 32px;
}

.before\:left-\[8px\]::before {
  content: var(--tw-content);
  left: 8px;
}

.before\:right-0::before {
  content: var(--tw-content);
  right: 0px;
}

.before\:top-\[0px\]::before {
  content: var(--tw-content);
  top: 0px;
}

.before\:top-\[13px\]::before {
  content: var(--tw-content);
  top: 13px;
}

.before\:top-\[2px\]::before {
  content: var(--tw-content);
  top: 2px;
}

.before\:top-\[4px\]::before {
  content: var(--tw-content);
  top: 4px;
}

.before\:top-\[50\%\]::before {
  content: var(--tw-content);
  top: 50%;
}

.before\:top-\[8px\]::before {
  content: var(--tw-content);
  top: 8px;
}

.before\:-z-\[1\]::before {
  content: var(--tw-content);
  z-index: -1;
}

.before\:z-\[-1\]::before {
  content: var(--tw-content);
  z-index: -1;
}

.before\:block::before {
  content: var(--tw-content);
  display: block;
}

.before\:contents::before {
  content: var(--tw-content);
  display: contents;
}

.before\:h-\[36px\]::before {
  content: var(--tw-content);
  height: 36px;
}

.before\:h-\[43px\]::before {
  content: var(--tw-content);
  height: 43px;
}

.before\:h-\[6px\]::before {
  content: var(--tw-content);
  height: 6px;
}

.before\:h-\[70px\]::before {
  content: var(--tw-content);
  height: 70px;
}

.before\:h-\[8px\]::before {
  content: var(--tw-content);
  height: 8px;
}

.before\:h-\[95px\]::before {
  content: var(--tw-content);
  height: 95px;
}

.before\:h-full::before {
  content: var(--tw-content);
  height: 100%;
}

.before\:w-\[36px\]::before {
  content: var(--tw-content);
  width: 36px;
}

.before\:w-\[43px\]::before {
  content: var(--tw-content);
  width: 43px;
}

.before\:w-\[6px\]::before {
  content: var(--tw-content);
  width: 6px;
}

.before\:w-\[70px\]::before {
  content: var(--tw-content);
  width: 70px;
}

.before\:w-\[8px\]::before {
  content: var(--tw-content);
  width: 8px;
}

.before\:w-\[95px\]::before {
  content: var(--tw-content);
  width: 95px;
}

.before\:w-full::before {
  content: var(--tw-content);
  width: 100%;
}

.before\:translate-y-\[-50\%\]::before {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.before\:rounded-full::before {
  content: var(--tw-content);
  border-radius: 9999px;
}

.before\:bg-black-300::before {
  content: var(--tw-content);
  background-color: rgba(8, 8, 8, 0.03);
}

.before\:bg-black-600::before {
  content: var(--tw-content);
  background-color: rgba(8, 8, 8, 0.6);
}

.before\:bg-black-800::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(8 8 8/var(--tw-bg-opacity));
}

.before\:bg-orange::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 147 48/var(--tw-bg-opacity));
}

.before\:bg-primary::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 182 70/var(--tw-bg-opacity));
}

.before\:bg-white::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255/var(--tw-bg-opacity));
}

.before\:opacity-0::before {
  content: var(--tw-content);
  opacity: 0;
}

.before\:opacity-80::before {
  content: var(--tw-content);
  opacity: 0.8;
}

.before\:transition-opacity::before {
  content: var(--tw-content);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.before\:duration-300::before {
  content: var(--tw-content);
  transition-duration: 300ms;
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-active:hover {
  border-color: rgba(8, 8, 8, 0.95);
}

.hover\:bg-active:hover {
  background-color: rgba(8, 8, 8, 0.95);
}

.hover\:bg-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 182 70/var(--tw-bg-opacity));
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255/var(--tw-bg-opacity));
}

.hover\:text-orange:hover {
  --tw-text-opacity: 1;
  color: rgb(255 147 48/var(--tw-text-opacity));
}

.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(255 182 70/var(--tw-text-opacity));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity));
}

.hover\:shadow-2xl:hover {
  --tw-shadow: 0px 36px 100px 0px rgba(8, 8, 8, 0.15);
  --tw-shadow-colored: 0px 36px 100px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
}

.hover\:before\:bg-primary:hover::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 182 70/var(--tw-bg-opacity));
}

.hover\:before\:opacity-80:hover::before {
  content: var(--tw-content);
  opacity: 0.8;
}

.focus\:border-black-800:focus {
  --tw-border-opacity: 1;
  border-color: rgb(8 8 8/var(--tw-border-opacity));
}

.focus\:border-opacity-40:focus {
  --tw-border-opacity: 0.4;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.group:hover .group-hover\:bottom-6 {
  bottom: 1.5rem;
}

@keyframes moveUp {
  0% {
    opacity: 1;
    transform: translateX(0px) translateY(0px) scale(1);
  }
  25% {
    opacity: 0;
    transform: translateX(10px) translateY(-10px) scale(0.9);
  }
  26% {
    opacity: 0;
    transform: translateX(-10px) translateY(10px) scale(0.9);
  }
  55% {
    opacity: 1;
    transform: translateX(0px) translateY(0px) scale(1);
  }
}
.group:hover .group-hover\:animate-arrow-move-up {
  animation: moveUp 0.8s linear;
}

.group:hover .group-hover\:bg-black-500 {
  background-color: rgba(8, 8, 8, 0.04);
}

.group:hover .group-hover\:fill-yellow {
  fill: #FFE600;
}

.group:hover .group-hover\:stroke-white {
  stroke: #fff;
}

.group:hover .group-hover\:text-orange {
  --tw-text-opacity: 1;
  color: rgb(255 147 48/var(--tw-text-opacity));
}

@keyframes moveUp {
  0% {
    opacity: 1;
    transform: translateX(0px) translateY(0px) scale(1);
  }
  25% {
    opacity: 0;
    transform: translateX(10px) translateY(-10px) scale(0.9);
  }
  26% {
    opacity: 0;
    transform: translateX(-10px) translateY(10px) scale(0.9);
  }
  55% {
    opacity: 1;
    transform: translateX(0px) translateY(0px) scale(1);
  }
}
.peer:hover ~ .peer-hover\:animate-arrow-move-up {
  animation: moveUp 0.8s linear;
}

@media (min-width: 576px) {
  .sm\:order-first {
    order: -9999;
  }
  .sm\:order-last {
    order: 9999;
  }
  .sm\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .sm\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .sm\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .sm\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .sm\:mb-0 {
    margin-bottom: 0px;
  }
  .sm\:mb-8 {
    margin-bottom: 2rem;
  }
  .sm\:mt-0 {
    margin-top: 0px;
  }
  .sm\:mt-10 {
    margin-top: 2.5rem;
  }
  .sm\:w-1\/3 {
    width: 33.333333%;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:gap-4 {
    gap: 1rem;
  }
  .sm\:pl-\[40px\] {
    padding-left: 40px;
  }
  .sm\:text-\[20px\] {
    font-size: 20px;
  }
  .sm\:text-\[30px\] {
    font-size: 30px;
  }
  .sm\:text-\[32px\] {
    font-size: 32px;
  }
  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 768px) {
  .md\:right-\[170px\] {
    right: 170px;
  }
  .md\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .md\:mb-\[60px\] {
    margin-bottom: 60px;
  }
  .md\:ml-\[5px\] {
    margin-left: 5px;
  }
  .md\:mt-0 {
    margin-top: 0px;
  }
  .md\:mt-\[-280px\] {
    margin-top: -280px;
  }
  .md\:block {
    display: block;
  }
  .md\:w-\[460px\] {
    width: 460px;
  }
  .md\:max-w-\[420px\] {
    max-width: 420px;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:items-end {
    align-items: flex-end;
  }
  .md\:justify-end {
    justify-content: flex-end;
  }
  .md\:gap-0 {
    gap: 0px;
  }
  .md\:gap-6 {
    gap: 1.5rem;
  }
  .md\:gap-\[60px\] {
    gap: 60px;
  }
  .md\:pl-\[60px\] {
    padding-left: 60px;
  }
  .md\:pt-\[280px\] {
    padding-top: 280px;
  }
  .md\:text-center {
    text-align: center;
  }
  .md\:text-\[20px\] {
    font-size: 20px;
  }
  .md\:text-\[44px\] {
    font-size: 44px;
  }
  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .md\:hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
  }
}
@media (min-width: 992px) {
  .lg\:bottom-\[80px\] {
    bottom: 80px;
  }
  .lg\:right-\[-30px\] {
    right: -30px;
  }
  .lg\:right-\[150px\] {
    right: 150px;
  }
  .lg\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .lg\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .lg\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .lg\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .lg\:my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .lg\:mb-0 {
    margin-bottom: 0px;
  }
  .lg\:ml-0 {
    margin-left: 0px;
  }
  .lg\:block {
    display: block;
  }
  .lg\:max-w-\[400px\] {
    max-width: 400px;
  }
  .lg\:max-w-\[416px\] {
    max-width: 416px;
  }
  .lg\:max-w-\[570px\] {
    max-width: 570px;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:flex-col {
    flex-direction: column;
  }
  .lg\:gap-12 {
    gap: 3rem;
  }
  .lg\:gap-6 {
    gap: 1.5rem;
  }
  .lg\:gap-\[104px\] {
    gap: 104px;
  }
  .lg\:gap-\[60px\] {
    gap: 60px;
  }
  .lg\:gap-y-0 {
    row-gap: 0px;
  }
  .lg\:p-8 {
    padding: 2rem;
  }
  .lg\:py-\[100px\] {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .lg\:pt-\[100px\] {
    padding-top: 100px;
  }
  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  .lg\:text-\[100px\] {
    font-size: 100px;
  }
  .lg\:text-\[24px\] {
    font-size: 24px;
  }
  .lg\:text-\[32px\] {
    font-size: 32px;
  }
  .lg\:text-\[44px\] {
    font-size: 44px;
  }
  .lg\:leading-\[80px\] {
    line-height: 80px;
  }
  .lg\:before\:h-\[100px\]::before {
    content: var(--tw-content);
    height: 100px;
  }
  .lg\:before\:h-\[48px\]::before {
    content: var(--tw-content);
    height: 48px;
  }
  .lg\:before\:h-\[85px\]::before {
    content: var(--tw-content);
    height: 85px;
  }
  .lg\:before\:w-\[100px\]::before {
    content: var(--tw-content);
    width: 100px;
  }
  .lg\:before\:w-\[48px\]::before {
    content: var(--tw-content);
    width: 48px;
  }
  .lg\:before\:w-\[85px\]::before {
    content: var(--tw-content);
    width: 85px;
  }
}
@media (min-width: 1280px) {
  .xl\:bottom-\[80px\] {
    bottom: 80px;
  }
  .xl\:right-\[150px\] {
    right: 150px;
  }
  .xl\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .xl\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .xl\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .xl\:mb-\[70px\] {
    margin-bottom: 70px;
  }
  .xl\:ml-\[16px\] {
    margin-left: 16px;
  }
  .xl\:inline-block {
    display: inline-block;
  }
  .xl\:max-w-\[527px\] {
    max-width: 527px;
  }
  .xl\:max-w-\[650px\] {
    max-width: 650px;
  }
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:flex-row {
    flex-direction: row;
  }
  .xl\:gap-0 {
    gap: 0px;
  }
  .xl\:gap-\[100px\] {
    gap: 100px;
  }
  .xl\:gap-\[134px\] {
    gap: 134px;
  }
  .xl\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .xl\:pl-0 {
    padding-left: 0px;
  }
  .xl\:pl-12 {
    padding-left: 3rem;
  }
  .xl\:pl-\[4\%\] {
    padding-left: 4%;
  }
  .xl\:pr-0 {
    padding-right: 0px;
  }
  .xl\:pt-12 {
    padding-top: 3rem;
  }
  .xl\:pt-\[120px\] {
    padding-top: 120px;
  }
  .xl\:text-left {
    text-align: left;
  }
  .xl\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .xl\:text-\[120px\] {
    font-size: 120px;
  }
  .xl\:text-\[24px\] {
    font-size: 24px;
  }
  .xl\:text-\[32px\] {
    font-size: 32px;
  }
  .xl\:text-\[44px\] {
    font-size: 44px;
  }
  .xl\:text-\[64px\] {
    font-size: 64px;
  }
  .xl\:text-\[80px\] {
    font-size: 80px;
  }
  .xl\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .xl\:leading-\[90px\] {
    line-height: 90px;
  }
  .xl\:before\:h-\[100px\]::before {
    content: var(--tw-content);
    height: 100px;
  }
  .xl\:before\:h-\[110px\]::before {
    content: var(--tw-content);
    height: 110px;
  }
  .xl\:before\:h-\[60px\]::before {
    content: var(--tw-content);
    height: 60px;
  }
  .xl\:before\:h-\[64px\]::before {
    content: var(--tw-content);
    height: 64px;
  }
  .xl\:before\:h-\[69px\]::before {
    content: var(--tw-content);
    height: 69px;
  }
  .xl\:before\:w-\[100px\]::before {
    content: var(--tw-content);
    width: 100px;
  }
  .xl\:before\:w-\[110px\]::before {
    content: var(--tw-content);
    width: 110px;
  }
  .xl\:before\:w-\[60px\]::before {
    content: var(--tw-content);
    width: 60px;
  }
  .xl\:before\:w-\[64px\]::before {
    content: var(--tw-content);
    width: 64px;
  }
  .xl\:before\:w-\[69px\]::before {
    content: var(--tw-content);
    width: 69px;
  }
}
@media (min-width: 1440px) {
  .\32 xl\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .\32 xl\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .\32 xl\:-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .\32 xl\:mb-\[80px\] {
    margin-bottom: 80px;
  }
  .\32 xl\:ml-5 {
    margin-left: 1.25rem;
  }
  .\32 xl\:max-w-\[initial\] {
    max-width: initial;
  }
  .\32 xl\:gap-0 {
    gap: 0px;
  }
  .\32 xl\:gap-\[134px\] {
    gap: 134px;
  }
  .\32 xl\:gap-\[40px\] {
    gap: 40px;
  }
  .\32 xl\:gap-x-\[100px\] {
    -moz-column-gap: 100px;
    column-gap: 100px;
  }
  .\32 xl\:pl-\[6\%\] {
    padding-left: 6%;
  }
  .\32 xl\:text-\[140px\] {
    font-size: 140px;
  }
  .\32 xl\:text-\[22px\] {
    font-size: 22px;
  }
  .\32 xl\:text-\[28px\] {
    font-size: 28px;
  }
  .\32 xl\:leading-\[110px\] {
    line-height: 110px;
  }
  .\32 xl\:before\:h-\[120px\]::before {
    content: var(--tw-content);
    height: 120px;
  }
  .\32 xl\:before\:w-\[120px\]::before {
    content: var(--tw-content);
    width: 120px;
  }
}
@media (min-width: 1920px) {
  .\33 xl\:gap-x-\[165px\] {
    -moz-column-gap: 165px;
    column-gap: 165px;
  }
  .\33 xl\:pl-\[17\%\] {
    padding-left: 17%;
  }
}

/* Text Rotation Animation */
.fade-text {
  display: inline-block;
  min-width: 250px;
  will-change: transform, opacity;
}

@media (max-width: 768px) {
  .fade-text {
    min-width: 180px;
  }
}

@media (min-width: 1200px) {
  .fade-text {
    min-width: 280px;
  }
}

.fade-out {
  animation: txt-slide-out 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-in {
  animation: txt-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes txt-slide-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes txt-slide-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Blog Filter Tabs Styling */
.blog-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 9999px;
  font-family: "Syne", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  background-color: rgba(8, 8, 8, 0.05);
  color: #080808;
  border: 1px solid rgba(8, 8, 8, 0.1);
  transition: all 0.3s ease-in-out;
  outline: none;
  user-select: none;
}

.blog-filter-btn:hover {
  background-color: #FFB646;
  color: #ffffff;
  border-color: #FFB646;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 182, 70, 0.35);
}

.blog-filter-btn.active {
  background-color: #FFB646 !important;
  color: #ffffff !important;
  border-color: #FFB646 !important;
  box-shadow: 0 4px 15px rgba(255, 182, 70, 0.45) !important;
  transform: translateY(-2px);
}

.project-filter-btn {
  padding: 10px 22px;
  border-radius: 40px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: #F6F6F6;
  color: #080808;
  border: 1px solid rgba(8, 8, 8, 0.1);
  transition: all 0.3s ease-in-out;
  outline: none;
  cursor: pointer;
  user-select: none;
}

.project-filter-btn:hover {
  background-color: #FFB646;
  color: #ffffff;
  border-color: #FFB646;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 182, 70, 0.35);
}

.project-filter-btn.active {
  background-color: #FFB646 !important;
  color: #ffffff !important;
  border-color: #FFB646 !important;
  box-shadow: 0 4px 15px rgba(255, 182, 70, 0.45) !important;
  transform: translateY(-2px);
}

/* Card & Featured Image Corner Rounding & 16:9 Aspect Ratio Crop Standards */
.blog-card,
.project-card {
  border-radius: 24px !important;
}

/* All Blog & Project Thumbnails: strictly 16:9 ratio with automatic crop & rounded corners */
.blog-card .blog-thumb-wrapper,
.blog-card .aspect-\[4\/3\],
.blog-card .aspect-\[16\/9\],
.blog-card > div:first-child > div:first-child,
.project-card .aspect-\[16\/9\],
.project-card .aspect-\[4\/3\],
.project-card > div:first-child > div:first-child,
#projects-grid div[class*="aspect-"] {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.blog-card img,
.project-card img,
#projects-grid img,
#related-projects-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  display: block;
}

/* Blog & Project Detail Page Featured Banner & Gallery: strict 16:9 ratio with rounded corners */
.blog-featured-crop,
section.bg-secondary .aspect-\[1076\/580\],
section.bg-secondary .aspect-\[16\/9\],
section.bg-secondary div[class*="aspect-"],
#proj-banner,
#proj-gallery-1,
#proj-gallery-2 {
  border-radius: 24px !important;
}

section.bg-secondary div[class*="aspect-"],
#project-gallery-grid div[class*="aspect-"] {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

.blog-featured-crop img,
section.bg-secondary div[class*="aspect-"] img,
#proj-banner,
#proj-gallery-1,
#proj-gallery-2 {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* ========================================================
   Modern 3D Immersive Project Details & Sticky Header
   ======================================================== */

/* Sticky Header with Glassmorphism Elevation */
#sticky-header {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#sticky-header.is-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 10px 30px -10px rgba(8, 8, 8, 0.08), 0 1px 3px rgba(8, 8, 8, 0.04) !important;
  border-bottom: 1px solid rgba(8, 8, 8, 0.08) !important;
}

#sticky-header.is-sticky .border-b {
  border-bottom-color: transparent !important;
}

/* 3D Perspective & Depth Foundations */
.perspective-container {
  perspective: 1200px;
}

.perspective-3d {
  perspective: 1400px;
  transform-style: preserve-3d;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

/* 3D Interactive Card */
.card-3d {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.card-3d:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg) scale(1.01);
  box-shadow: 0 25px 50px -12px rgba(8, 8, 8, 0.18), 0 0 0 1px rgba(255, 182, 70, 0.35);
}

/* 3D Banner Hero Presentation */
.banner-3d-stage {
  perspective: 1600px;
}

.banner-3d-frame {
  transform: rotateX(2.5deg) translateY(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  box-shadow: 0 25px 60px -15px rgba(8, 8, 8, 0.25), 0 10px 25px -5px rgba(8, 8, 8, 0.12);
}

.banner-3d-frame:hover {
  transform: rotateX(0deg) translateY(-6px) scale(1.008);
  box-shadow: 0 35px 75px -15px rgba(8, 8, 8, 0.32), 0 0 0 2px rgba(255, 182, 70, 0.5);
}

/* Floating Glass 3D Accents */
.glass-3d-float {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(8, 8, 8, 0.08);
  box-shadow: 0 16px 36px -12px rgba(8, 8, 8, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  transition: all 0.35s ease;
}

.glass-3d-float:hover {
  border-color: rgba(255, 182, 70, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -12px rgba(255, 182, 70, 0.22);
}

/* Floating Dark 3D Badge */
.badge-3d-dark {
  background: linear-gradient(135deg, #0e1217 0%, #05070a 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 0 20px -5px rgba(0, 240, 255, 0.15);
}

/* 3D Deliverables Pill (Futuristic Frosted Pill) */
.deliverable-3d-pill {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(8, 8, 8, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}

.deliverable-3d-pill:hover {
  transform: translateY(-3px) scale(1.025);
  border-color: #FFB646;
  background-color: #ffffff;
  box-shadow: 0 12px 28px -6px rgba(255, 182, 70, 0.3), 0 0 12px rgba(0, 240, 255, 0.2);
}

/* ==========================================================================
   GLOBAL 3D GLASSMORHPISM DESIGN SYSTEM (Site-wide)
   ========================================================================== */

/* Universal 3D Stage & Smooth Perspective */
.glass-perspective {
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Sticky Header 3D Glassmorphism */
#sticky-header {
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

#sticky-header.is-sticky {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(8, 8, 8, 0.08) !important;
  box-shadow: 0 12px 32px -8px rgba(8, 8, 8, 0.08), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
}

/* Primary Glassmorphism 3D Panel / Card */
.glass-card-3d,
.bg-black-500,
.project-card,
.blog-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.78) 100%) !important;
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(8, 8, 8, 0.08) !important;
  box-shadow: 
    0 20px 40px -12px rgba(8, 14, 28, 0.08), 
    0 2px 8px -2px rgba(8, 8, 8, 0.04), 
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 1) !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  position: relative;
  overflow: hidden;
}

/* Holographic Shimmer Beam on all Glass Cards */
.bg-black-500::before,
.project-card::before,
.blog-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(0, 240, 255, 0.12) 48%,
    rgba(255, 182, 70, 0.2) 52%,
    rgba(255, 255, 255, 0.3) 55%,
    transparent 70%
  );
  transform: skewX(-20deg);
  transition: left 0.75s ease;
  pointer-events: none;
  z-index: 2;
}

.bg-black-500:hover::before,
.project-card:hover::before,
.blog-card:hover::before {
  left: 150%;
}

.glass-card-3d:hover,
.bg-black-500:hover,
.project-card:hover,
.blog-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 
    0 28px 56px -12px rgba(8, 14, 28, 0.16), 
    0 0 20px -2px rgba(255, 182, 70, 0.35),
    0 0 10px 0 rgba(0, 240, 255, 0.2),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 1) !important;
  border-color: rgba(255, 182, 70, 0.6) !important;
}

/* Dark 3D Glass Surface (Offcanvas & Dark Cards) */
.glass-card-dark-3d,
#offcanvas {
  background: rgba(14, 18, 23, 0.88) !important;
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.5), inset 1px 0 1px rgba(255, 255, 255, 0.15);
}

/* 3D Glass Tilt Card with Dynamic Specular Reflection */
.tilt-card-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out, box-shadow 0.35s ease;
  overflow: hidden;
  will-change: transform;
}

.tilt-card-3d::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle 350px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 5;
}

.tilt-card-3d:hover::after {
  opacity: 1;
}

/* 3D Glass Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(8, 8, 8, 0.15) !important;
  color: #080808 !important;
  box-shadow: inset 0 2px 4px rgba(8, 8, 8, 0.04), 0 2px 6px rgba(8, 8, 8, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  color: rgba(8, 8, 8, 0.5) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus {
  background: #ffffff !important;
  border-color: #FFB646 !important;
  box-shadow: 0 0 0 3px rgba(255, 182, 70, 0.25), 0 10px 24px -4px rgba(255, 182, 70, 0.18) !important;
  transform: translateY(-2px);
}

/* 3D Glass Buttons */
.btn-primary,
.btn-primary-outline {
  transform-style: preserve-3d;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 28px -6px rgba(255, 182, 70, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.btn-primary-outline:hover {
  transform: translateY(-4px) scale(1.02);
  background: rgba(8, 8, 8, 0.05);
  box-shadow: 0 12px 24px -6px rgba(8, 8, 8, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* 3D Floating Action / Scroll-Up Glass Pill */
#scrollUp {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 16px 36px -8px rgba(8, 8, 8, 0.18), inset 0 1px 1px rgba(255, 255, 255, 1);
  transition: transform 0.35s ease, background 0.3s ease, border-color 0.3s ease;
}

#scrollUp:hover {
  transform: translateY(-5px) scale(1.08);
  border-color: #FFB646 !important;
  background: rgba(255, 182, 70, 0.95) !important;
  box-shadow: 0 20px 45px -8px rgba(255, 182, 70, 0.5);
}

/* Ambient 3D Glass Light Orbs (Background Glow Elements) */
.glass-ambient-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  animation: floatOrb 12s ease-in-out infinite alternate;
}

@keyframes floatOrb {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(30px, -25px, 0) scale(1.08); }
  100% { transform: translate3d(-20px, 20px, 0) scale(0.95); }
}

/* ==========================================================================
   FUTURISTIC 3D GLASSMORPHISM & HOLOGRAPHIC CYBER-CHROME UPGRADE
   ========================================================================== */

:root {
  --futuristic-cyan: rgba(0, 240, 255, 0.45);
  --futuristic-amber: rgba(255, 182, 70, 0.55);
  --futuristic-violet: rgba(168, 85, 247, 0.4);
  --futuristic-rim: rgba(255, 255, 255, 0.9);
}

/* Futuristic Subtle Cyber-Grid Background Layer */
.futuristic-grid-bg {
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(255, 182, 70, 0.12), transparent 45%),
    radial-gradient(circle at 100% 60%, rgba(0, 240, 255, 0.08), transparent 40%),
    linear-gradient(rgba(8, 8, 8, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 8, 8, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
}

/* Futuristic Ultra-Glass Card (Hyper-clean frosted glass with Chromatic Aberration & Prismatic Edge) */
.glass-futuristic-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.82) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(8, 8, 8, 0.09) !important;
  box-shadow: 
    0 24px 48px -12px rgba(8, 14, 28, 0.1),
    0 2px 6px 0 rgba(0, 0, 0, 0.04),
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 2px 0 rgba(0, 240, 255, 0.15) !important;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

/* Holographic Prismatic Shimmer Sweep on Hover */
.glass-futuristic-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(0, 240, 255, 0.18) 48%,
    rgba(255, 182, 70, 0.22) 52%,
    rgba(255, 255, 255, 0.35) 55%,
    transparent 70%
  );
  transform: skewX(-20deg);
  transition: left 0.75s ease;
  pointer-events: none;
  z-index: 3;
}

.glass-futuristic-card:hover::before {
  left: 150%;
}

.glass-futuristic-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 
    0 30px 60px -15px rgba(8, 14, 28, 0.18),
    0 0 25px -4px rgba(255, 182, 70, 0.35),
    0 0 15px -2px rgba(0, 240, 255, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 1) !important;
  border-color: rgba(255, 182, 70, 0.6) !important;
}

/* Futuristic HUD Corner Reticles & Technical Accents */
.hud-corner-tl,
.hud-corner-br {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 4;
}

.hud-corner-tl {
  top: 8px;
  left: 8px;
  border-top: 2px solid rgba(255, 182, 70, 0.6);
  border-left: 2px solid rgba(255, 182, 70, 0.6);
}

.hud-corner-br {
  bottom: 8px;
  right: 8px;
  border-bottom: 2px solid rgba(0, 240, 255, 0.6);
  border-right: 2px solid rgba(0, 240, 255, 0.6);
}

/* Cybernetic Neon Glow Glass Pills / Badges */
.glass-cyber-badge {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;
}

.glass-cyber-badge::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #FFB646, #00f0ff, #a855f7);
}

/* Futuristic Interactive Cursor Spotlight Tracker */
.futuristic-spotlight {
  position: relative;
  overflow: hidden;
}

.futuristic-spotlight::after {
  content: "";
  position: absolute;
  top: var(--cursor-y, -200px);
  left: var(--cursor-x, -200px);
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 182, 70, 0.14) 0%, rgba(0, 240, 255, 0.08) 40%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.futuristic-spotlight:hover::after {
  opacity: 1;
}

/* High-tech Sticky Header Upgrade */
#sticky-header.is-sticky {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(24px) saturate(210%);
  -webkit-backdrop-filter: blur(24px) saturate(210%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 
    0 16px 40px -12px rgba(8, 8, 8, 0.09),
    0 1px 0 0 rgba(0, 240, 255, 0.12),
    inset 0 1px 2px 0 rgba(255, 255, 255, 1) !important;
}

/* Cybernetic Neon Pulse Dot */
.cyber-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff;
}

.cyber-dot::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 240, 255, 0.6);
  animation: cyberPulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes cyberPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ==========================================================================
   FUTURISTIC DARK MODE ECOSYSTEM (Tailored Obsidian & Cyber-Glass Palette)
   Note: Per requirement, NOT flat black (#000000), but deep futuristic obsidian
   slate (#0b0f17 / #0f141f / #141a27) with high-contrast radiant typography.
   ========================================================================== */

/* Smooth global color transitions */
html, body, header, section, div, p, h1, h2, h3, h4, h5, h6, span, a, input, textarea, button {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

/* Base Body & Root in Dark Mode */
html.dark,
html.dark body {
  background-color: #0b0f17 !important;
  color: #e2e8f0 !important;
}

/* Background Utility Inversions for Dark Mode */
html.dark .bg-white {
  background-color: #0f141f !important;
}

html.dark .bg-secondary {
  background-color: #141a27 !important;
}

html.dark .bg-black-500,
html.dark .featured-properties {
  background-color: rgba(20, 26, 39, 0.7) !important;
}

/* Service, Resume, and Pricing cards in Dark Mode */
html.dark .bg-black-500.rounded-lg,
html.dark .bg-black-500.rounded-2xl,
html.dark div[data-aos="fade-up"] .bg-black-500 {
  background: linear-gradient(135deg, rgba(20, 28, 44, 0.88) 0%, rgba(14, 19, 31, 0.78) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5), inset 0 1px 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Hover state for cards in Dark Mode: Prevent flash of bright white */
html.dark .bg-black-500:hover,
html.dark .bg-black-500.hover\:bg-white:hover,
html.dark .group:hover .group-hover\:bg-black-500 {
  background: linear-gradient(135deg, rgba(26, 36, 56, 0.96) 0%, rgba(18, 25, 40, 0.9) 100%) !important;
  border-color: rgba(255, 182, 70, 0.45) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.65), 0 0 20px rgba(255, 182, 70, 0.2) !important;
}

/* Service icon circle in Dark Mode */
html.dark .w-12.h-12.bg-white.rounded-full {
  background: rgba(28, 38, 58, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.dark .w-12.h-12.bg-white.rounded-full svg path[fill="#080808"] {
  fill: #f8fafc !important;
}

/* User requirement: "Industries / I am working-with..." text contrast and brandCarousel ribbon */
html.dark section:has(.brandCarousel) {
  background-color: #0b0f17 !important;
}

html.dark section:has(.brandCarousel) h3,
html.dark section:has(.brandCarousel) h3 .text-black-800 {
  color: #f8fafc !important;
}

html.dark section:has(.brandCarousel) .text-orange {
  color: #FFB646 !important;
}

/* The carousel slider line itself remains a clean white ribbon so client logos pop clearly */
html.dark .brandCarousel {
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

html.dark .brandCarousel .swiper {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

html.dark .brandCarousel img {
  filter: none !important;
}

html.dark .brandCarousel .border-black-text-100 {
  border-color: rgba(8, 8, 8, 0.12) !important;
}

/* Primary Glassmorphism Panels in Dark Mode */
html.dark .glass-futuristic-card,
html.dark .glass-card-3d,
html.dark .project-card,
html.dark .blog-card,
html.dark .glass-3d-float {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.85) 0%, rgba(13, 18, 29, 0.72) 100%) !important;
  backdrop-filter: blur(24px) saturate(210%);
  -webkit-backdrop-filter: blur(24px) saturate(210%);
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 
    0 24px 50px -12px rgba(0, 0, 0, 0.55),
    0 2px 10px -2px rgba(0, 240, 255, 0.08),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html.dark .glass-futuristic-card:hover,
html.dark .glass-card-3d:hover,
html.dark .project-card:hover,
html.dark .blog-card:hover {
  border-color: rgba(255, 182, 70, 0.5) !important;
  box-shadow: 
    0 30px 60px -15px rgba(0, 0, 0, 0.75),
    0 0 25px -4px rgba(255, 182, 70, 0.35),
    0 0 15px -2px rgba(0, 240, 255, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

/* Grid & Stage Backgrounds in Dark Mode */
html.dark .futuristic-grid-bg {
  background-color: #0b0f17 !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(255, 182, 70, 0.08), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(0, 240, 255, 0.05), transparent 40%),
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
}

/* Typography Visibility & Contrast in Dark Mode */
html.dark h1, 
html.dark h2, 
html.dark h3, 
html.dark h4, 
html.dark h5, 
html.dark h6,
html.dark .text-black-800 {
  color: #f8fafc !important;
}

html.dark .text-active {
  color: #f1f5f9 !important;
}

html.dark .text-black-700,
html.dark .text-black-text-800 {
  color: #cbd5e1 !important;
}

html.dark .paragraph,
html.dark .text-black-text-600 {
  color: #94a3b8 !important;
}

/* Borders and Separators in Dark Mode */
html.dark .border-black-800,
html.dark .border-black-text-100,
html.dark .border-black-text-400,
html.dark [class*="border-black-800"] {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .border-gray-300 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Sticky Header in Dark Mode */
html.dark #sticky-header.is-sticky {
  background: rgba(11, 15, 23, 0.88) !important;
  backdrop-filter: blur(24px) saturate(210%);
  -webkit-backdrop-filter: blur(24px) saturate(210%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 16px 40px -12px rgba(0, 0, 0, 0.6),
    0 1px 0 0 rgba(0, 240, 255, 0.18),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Forms & Inputs in Dark Mode */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="tel"],
html.dark textarea {
  background: rgba(20, 27, 41, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}

html.dark input[type="text"]::placeholder,
html.dark input[type="email"]::placeholder,
html.dark input[type="password"]::placeholder,
html.dark input[type="tel"]::placeholder,
html.dark textarea::placeholder {
  color: rgba(148, 163, 184, 0.6) !important;
}

html.dark input[type="text"]:focus,
html.dark input[type="email"]:focus,
html.dark input[type="password"]:focus,
html.dark input[type="tel"]:focus,
html.dark textarea:focus {
  background: rgba(25, 34, 52, 0.98) !important;
  border-color: #FFB646 !important;
  box-shadow: 0 0 0 3px rgba(255, 182, 70, 0.25), 0 10px 24px -4px rgba(0, 0, 0, 0.5) !important;
}

/* Tab Buttons in Dark Mode */
html.dark .tab-btn {
  background-color: rgba(20, 27, 41, 0.8) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark .tab-btn:hover {
  background-color: rgba(30, 41, 62, 0.95) !important;
  color: #ffffff !important;
}

html.dark .tab-btn.active {
  background: linear-gradient(135deg, #FFB646 0%, #FF9330 100%) !important;
  color: #0b0f17 !important;
  border-color: #FFB646 !important;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(255, 182, 70, 0.35) !important;
}

/* Primary Outlines and Buttons in Dark Mode */
html.dark .btn-primary-outline {
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f8fafc !important;
}

html.dark .btn-primary-outline:hover {
  border-color: #FFB646 !important;
  background-color: #FFB646 !important;
  color: #0b0f17 !important;
}

html.dark .btn-primary {
  background-color: #f1f5f9 !important;
  color: #0b0f17 !important;
}

html.dark .btn-primary:hover {
  background-color: transparent !important;
  border-color: #FFB646 !important;
  color: #FFB646 !important;
}

/* ScrollUp pill in Dark Mode */
html.dark #scrollUp {
  background: rgba(20, 27, 41, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6) !important;
}

html.dark #scrollUp svg {
  stroke: #FFB646 !important;
}

/* Stroke text in Dark Mode */
html.dark .strock-text {
  color: #0b0f17 !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3), -1px -1px 0 rgba(255, 255, 255, 0.3), 1px -1px 0 rgba(255, 255, 255, 0.3), -1px 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* SVG Stroke adjustments in Dark Mode */
html.dark .stroke-black-800 {
  stroke: #f1f5f9 !important;
}

/* Let's Talk button in Dark Mode */
html.dark header a[href*="contact.html"] {
  color: #f1f5f9 !important;
}

html.dark header a[href*="contact.html"]:hover {
  color: #FFB646 !important;
}

/* Header logo handling in dark mode */
html.dark header img[src*="logo2.png"] {
  filter: brightness(0) invert(1);
}

/* Offcanvas in dark mode */
html.dark .offcanvas {
  background-color: #0b0f17 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   FUTURISTIC THEME TOGGLE BUTTON (Cyberpunk Orb / Holo Pill)
   ========================================================================== */

.futuristic-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 76px;
  height: 38px;
  padding: 3px 5px;
  border-radius: 9999px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 245, 255, 0.85) 100%);
  border: 1.5px solid rgba(8, 8, 8, 0.15);
  box-shadow: 
    0 8px 20px -4px rgba(8, 8, 8, 0.12),
    inset 0 1px 2px rgba(255, 255, 255, 1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  z-index: 40;
}

.futuristic-theme-toggle:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: #FFB646;
  box-shadow: 0 10px 24px -4px rgba(255, 182, 70, 0.3), inset 0 1px 2px rgba(255, 255, 255, 1);
}

/* Dark state of the button */
html.dark .futuristic-theme-toggle {
  background: linear-gradient(135deg, rgba(22, 29, 44, 0.95) 0%, rgba(13, 18, 29, 0.9) 100%);
  border: 1.5px solid rgba(0, 240, 255, 0.35);
  box-shadow: 
    0 8px 24px -4px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(0, 240, 255, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

html.dark .futuristic-theme-toggle:hover {
  border-color: #00f0ff;
  box-shadow: 
    0 10px 28px -4px rgba(0, 240, 255, 0.35),
    0 0 20px rgba(0, 240, 255, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

/* Sliding futuristic orb */
.futuristic-toggle-thumb {
  position: absolute;
  top: 3.5px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB646 0%, #FF9330 100%);
  box-shadow: 0 3px 8px rgba(255, 147, 48, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, box-shadow 0.4s ease;
  z-index: 2;
}

html.dark .futuristic-toggle-thumb {
  transform: translateX(38px);
  background: linear-gradient(135deg, #00f0ff 0%, #0088ff 100%);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.8), 0 3px 10px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* Icon glyphs inside the toggle */
.futuristic-toggle-icon {
  width: 15px;
  height: 15px;
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.futuristic-toggle-sun {
  color: #ffffff;
  display: block;
}

.futuristic-toggle-moon {
  color: #ffffff;
  display: none;
}

html.dark .futuristic-toggle-sun {
  display: none;
}

html.dark .futuristic-toggle-moon {
  display: block;
}

/* Ambient side icons (Sun & Moon static hints) */
.toggle-ambient-icon {
  font-size: 13px;
  z-index: 1;
  opacity: 0.6;
  line-height: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toggle-ambient-sun {
  margin-left: 6px;
  color: #ff9330;
}

.toggle-ambient-moon {
  margin-right: 6px;
  color: #94a3b8;
}

html.dark .toggle-ambient-sun {
  opacity: 0.35;
}

html.dark .toggle-ambient-moon {
  opacity: 1;
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
}

/* Floating Dock Theme Switcher (Perfect non-interfering position) */
.futuristic-floating-theme-switch {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
  animation: floatSwitch 6s ease-in-out infinite alternate;
}

@keyframes floatSwitch {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

@media (max-width: 768px) {
  .futuristic-floating-theme-switch {
    bottom: 20px;
    right: 20px;
    transform: scale(0.92);
  }
}

/* ==========================================================================
   FUTURISTIC ROUNDED MOUSE CURSOR (Arrow & Hand Pointer with Rounded Corners)
   ========================================================================== */

/* Modern Rounded Arrow Pointer (Default State) */
html, body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='arrowGrad' x1='2' y1='2' x2='22' y2='22' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23FFB646'/%3E%3Cstop offset='50%25' stop-color='%23FF9330'/%3E%3Cstop offset='100%25' stop-color='%2300f0ff'/%3E%3C/linearGradient%3E%3Cfilter id='dropShadow' x='0' y='0' width='28' height='28' filterUnits='userSpaceOnUse'%3E%3CfeDropShadow dx='1' dy='2' stdDeviation='1.2' flood-color='%23000000' flood-opacity='0.45'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M4.5 3.5C3.8 2.6 5 1.5 5.9 2.1L23 11.2C24.1 11.8 23.8 13.5 22.5 13.7L15.2 14.8L12.8 21.8C12.4 23.1 10.6 23.2 10.1 22L4.5 3.5Z' fill='url(%23arrowGrad)' stroke='%23080808' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round' filter='url(%23dropShadow)'/%3E%3Ccircle cx='14.5' cy='14.5' r='1.8' fill='%23ffffff'/%3E%3C/svg%3E") 4 3, auto !important;
}

/* Rounded Hand Pointer Icon on Interactive Elements (Links, Buttons, Tabs) */
a, button, input, textarea, select, [role="button"], .cursor-pointer, .tab-btn, .tilt-card-3d, .btn-primary, .btn-primary-outline {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='handGrad' x1='4' y1='2' x2='26' y2='26' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%2300f0ff'/%3E%3Cstop offset='50%25' stop-color='%23a855f7'/%3E%3Cstop offset='100%25' stop-color='%23FFB646'/%3E%3C/linearGradient%3E%3Cfilter id='handShadow' x='0' y='0' width='30' height='30' filterUnits='userSpaceOnUse'%3E%3CfeDropShadow dx='1' dy='2' stdDeviation='1.5' flood-color='%2300f0ff' flood-opacity='0.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M10.5 4C9.7 4 9 4.7 9 5.5V14.2C8.3 13.7 7.5 13.4 6.7 13.6C5.5 13.9 4.8 15.2 5.3 16.3L9.5 24.2C10.7 26.5 13.1 28 15.8 28H19C22.3 28 25 25.3 25 22V13.5C25 12.7 24.3 12 23.5 12C23.3 12 23.1 12 22.9 12.1C22.6 11.4 21.8 11 21 11C20.7 11 20.4 11.1 20.2 11.2C19.8 10.5 19 10 18.2 10C18 10 17.8 10 17.6 10.1C17.2 9.4 16.5 9 15.7 9C15.1 9 14.5 9.3 14.1 9.8V5.5C14.1 4.7 13.4 4 12.6 4H10.5Z' fill='url(%23handGrad)' stroke='%23080808' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round' filter='url(%23handShadow)'/%3E%3C/svg%3E") 10 4, pointer !important;
}

/* Dark Mode: Vibrant Neon Rounded Arrow */
html.dark, html.dark body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='darkArrowGrad' x1='2' y1='2' x2='22' y2='22' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%2300f0ff'/%3E%3Cstop offset='60%25' stop-color='%2360a5fa'/%3E%3Cstop offset='100%25' stop-color='%23FFB646'/%3E%3C/linearGradient%3E%3Cfilter id='neonGlow' x='0' y='0' width='28' height='28' filterUnits='userSpaceOnUse'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='2' flood-color='%2300f0ff' flood-opacity='0.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M4.5 3.5C3.8 2.6 5 1.5 5.9 2.1L23 11.2C24.1 11.8 23.8 13.5 22.5 13.7L15.2 14.8L12.8 21.8C12.4 23.1 10.6 23.2 10.1 22L4.5 3.5Z' fill='url(%23darkArrowGrad)' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round' filter='url(%23neonGlow)'/%3E%3Ccircle cx='14.5' cy='14.5' r='1.8' fill='%23ffffff'/%3E%3C/svg%3E") 4 3, auto !important;
}

/* Dark Mode Hand Pointer */
html.dark a, html.dark button, html.dark input, html.dark textarea, html.dark select, html.dark [role="button"], html.dark .cursor-pointer, html.dark .tab-btn, html.dark .tilt-card-3d, html.dark .btn-primary, html.dark .btn-primary-outline {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='darkHandGrad' x1='4' y1='2' x2='26' y2='26' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23FFB646'/%3E%3Cstop offset='50%25' stop-color='%23FF9330'/%3E%3Cstop offset='100%25' stop-color='%23a855f7'/%3E%3Cstop offset='100%25' stop-color='%2300f0ff'/%3E%3C/linearGradient%3E%3Cfilter id='amberHandGlow' x='0' y='0' width='30' height='30' filterUnits='userSpaceOnUse'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='2.5' flood-color='%23FFB646' flood-opacity='0.7'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M10.5 4C9.7 4 9 4.7 9 5.5V14.2C8.3 13.7 7.5 13.4 6.7 13.6C5.5 13.9 4.8 15.2 5.3 16.3L9.5 24.2C10.7 26.5 13.1 28 15.8 28H19C22.3 28 25 25.3 25 22V13.5C25 12.7 24.3 12 23.5 12C23.3 12 23.1 12 22.9 12.1C22.6 11.4 21.8 11 21 11C20.7 11 20.4 11.1 20.2 11.2C19.8 10.5 19 10 18.2 10C18 10 17.8 10 17.6 10.1C17.2 9.4 16.5 9 15.7 9C15.1 9 14.5 9.3 14.1 9.8V5.5C14.1 4.7 13.4 4 12.6 4H10.5Z' fill='url(%23darkHandGrad)' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round' filter='url(%23amberHandGlow)'/%3E%3C/svg%3E") 10 4, pointer !important;
}

/* ==========================================================================
   PROJECT DETAILS & CASE STUDY CARDS IN DARK MODE
   Ensure all cards, spec sheets, deliverable pills and gallery cards are visible
   ========================================================================== */

/* Deliverables pills */
html.dark .deliverable-3d-pill {
  background: rgba(22, 30, 48, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

html.dark .deliverable-3d-pill:hover {
  background: rgba(30, 42, 66, 0.98) !important;
  border-color: #FFB646 !important;
}

html.dark .deliverable-3d-pill span.text-black-800 {
  color: #f8fafc !important;
}

html.dark .glass-cyber-badge {
  background: rgba(22, 30, 48, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #34d399 !important;
}

/* Related Works Section in Dark Mode */
html.dark section.bg-\[\#F8F9FA\],
html.dark section:has(#related-projects-container) {
  background-color: #0b0f17 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Related Works Cards in Dark Mode */
html.dark #related-projects-container .card-3d,
html.dark #related-projects-container .bg-white {
  background: linear-gradient(135deg, rgba(20, 28, 44, 0.92) 0%, rgba(14, 19, 31, 0.82) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

html.dark #related-projects-container .card-3d:hover {
  border-color: rgba(255, 182, 70, 0.5) !important;
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.75), 0 0 20px rgba(255, 182, 70, 0.25) !important;
}

html.dark #related-projects-container h4,
html.dark #related-projects-container h4 a {
  color: #f8fafc !important;
}

html.dark #related-projects-container h4 a:hover {
  color: #FFB646 !important;
}

html.dark #related-projects-container span.text-black-800,
html.dark #related-projects-container span.text-black-text-600 {
  color: #cbd5e1 !important;
}

html.dark #related-projects-container span.bg-black-500 {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}

html.dark #related-projects-container a.w-9.h-9 {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

html.dark #related-projects-container a.w-9.h-9:hover {
  background-color: #FFB646 !important;
  color: #0b0f17 !important;
}



html.dark .card-3d.bg-black-500,
html.dark .card-3d {
  background-color: #141a27 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   HOMEPAGE FUTURISTIC 3D GLASSMORPHISM CARDS (Recent Work, Testimonial, Blog)
   ========================================================================== */

/* Testimonial Section 3D Glass Elevation */
.testimonial .swiper-slide {
  padding: 36px 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.85) 100%);
  border: 1px solid rgba(8, 8, 8, 0.08);
  box-shadow: 0 16px 36px -8px rgba(8, 14, 28, 0.06), inset 0 1px 1px rgba(255, 255, 255, 1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial .swiper-slide:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 182, 70, 0.4);
  box-shadow: 0 24px 48px -10px rgba(8, 14, 28, 0.12), 0 0 20px rgba(255, 182, 70, 0.15);
}

/* Testimonial Dark Mode */
html.dark .testimonial .swiper-slide {
  background: linear-gradient(135deg, rgba(20, 28, 44, 0.88) 0%, rgba(14, 19, 31, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

html.dark .testimonial .swiper-slide:hover {
  border-color: rgba(255, 182, 70, 0.5) !important;
  box-shadow: 0 28px 56px -12px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 182, 70, 0.25) !important;
}

/* Quote Icon in Dark Mode */
html.dark .testimonial .swiper-slide svg path[fill=#080808] {
  fill: #FFB646 !important;
}

/* Divider line inside testimonial cards */
html.dark .testimonial .swiper-slide svg path[stroke=#080808] {
  stroke: #FFB646 !important;
  stroke-opacity: 0.8 !important;
}

/* Portfolio Recent Work Cards on Homepage */
section.bg-secondary .col-span-12.md\:col-span-6 {
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.45) 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 16px 36px -8px rgba(8, 14, 28, 0.06), inset 0 1px 1px rgba(255, 255, 255, 1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

section.bg-secondary .col-span-12.md\:col-span-6:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 182, 70, 0.5);
  box-shadow: 0 26px 54px -12px rgba(8, 14, 28, 0.14), 0 0 24px rgba(255, 182, 70, 0.2);
}

/* Dark mode for Recent Work Cards */
html.dark section.bg-secondary .col-span-12.md\:col-span-6 {
  background: linear-gradient(135deg, rgba(20, 28, 44, 0.85) 0%, rgba(14, 19, 31, 0.75) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 20px 44px -10px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

html.dark section.bg-secondary .col-span-12.md\:col-span-6:hover {
  border-color: rgba(255, 182, 70, 0.55) !important;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), 0 0 28px rgba(255, 182, 70, 0.25) !important;
}

/* Portfolio Tags in Dark Mode */
html.dark section.bg-secondary a[class*=border-black-text-400] {
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.05);
}

html.dark section.bg-secondary a[class*=border-black-text-400]:hover {
  background: #FFB646 !important;
  border-color: #FFB646 !important;
  color: #0b0f17 !important;
}

/* Homepage Blog Cards 3D Elevation */
section:has(a[href*=building-lightweight]) .grid.sm\:grid-cols-2 > div {
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.6) 100%);
  border: 1px solid rgba(8, 8, 8, 0.06);
  box-shadow: 0 12px 28px -6px rgba(8, 14, 28, 0.05), inset 0 1px 1px rgba(255, 255, 255, 1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

section:has(a[href*=building-lightweight]) .grid.sm\:grid-cols-2 > div:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 182, 70, 0.45);
  box-shadow: 0 24px 48px -10px rgba(8, 14, 28, 0.12), 0 0 20px rgba(255, 182, 70, 0.18);
}

/* Blog Cards in Dark Mode */
html.dark section:has(a[href*=building-lightweight]) .grid.sm\:grid-cols-2 > div {
  background: linear-gradient(135deg, rgba(20, 28, 44, 0.85) 0%, rgba(14, 19, 31, 0.75) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 18px 38px -8px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

html.dark section:has(a[href*=building-lightweight]) .grid.sm\:grid-cols-2 > div:hover {
  border-color: rgba(255, 182, 70, 0.5) !important;
  box-shadow: 0 28px 56px -12px rgba(0, 0, 0, 0.75), 0 0 25px rgba(255, 182, 70, 0.25) !important;
}

/* User requirement: All form fields and input corners MUST be smooth & rounded */
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
textarea {
  border-radius: 18px !important;
}

#contact-form input,
#contact-form textarea {
  border-radius: 18px !important;
}

/* Hero client counter divider line in dark mode */
html.dark .counter ~ span ~ span svg path[stroke=#080808],
html.dark .counter ~ span ~ span svg path {
  stroke: rgba(255, 255, 255, 0.3) !important;
}

/* Hero social icons in dark mode */
html.dark .hero-social-link,
html.dark section.futuristic-grid-bg ul li a {
  color: #f8fafc !important;
}

html.dark section.futuristic-grid-bg ul li a:hover {
  color: #FFB646 !important;
}

/* ==========================================================================
   BLOG LISTING & ARTICLE STYLES (Light & Dark Theme)
   ========================================================================== */

/* Blog Category Filter Pills (Light Mode) */
.blog-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 9999px;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #475569;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 12px -2px rgba(8, 14, 28, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.blog-filter-btn:hover {
  color: #080808;
  border-color: #FFB646;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(255, 182, 70, 0.25);
}

.blog-filter-btn.active {
  background: linear-gradient(135deg, #FFB646 0%, #FF9330 100%) !important;
  color: #0b0f17 !important;
  border-color: #FFB646 !important;
  box-shadow: 0 6px 20px rgba(255, 182, 70, 0.4) !important;
  transform: translateY(-1px);
}

/* Blog Category Filter Pills (Dark Mode) */
html.dark .blog-filter-btn {
  background: rgba(20, 28, 44, 0.85);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.dark .blog-filter-btn:hover {
  color: #ffffff;
  background: rgba(28, 40, 62, 0.95);
  border-color: rgba(255, 182, 70, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 182, 70, 0.25);
  transform: translateY(-2px);
}

html.dark .blog-filter-btn.active {
  background: linear-gradient(135deg, #FFB646 0%, #FF9330 100%) !important;
  color: #0b0f17 !important;
  border-color: #FFB646 !important;
  box-shadow: 0 8px 24px rgba(255, 182, 70, 0.45) !important;
  transform: translateY(-1px);
}

/* Blog Grid Cards (Light Mode) */
#blog-grid .blog-card {
  background: #f8fafc;
  border: 1px solid rgba(8, 8, 8, 0.05);
  box-shadow: 0 10px 24px -6px rgba(8, 14, 28, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#blog-grid .blog-card:hover {
  background: #ffffff;
  border-color: rgba(255, 182, 70, 0.4);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -10px rgba(8, 14, 28, 0.12), 0 0 18px rgba(255, 182, 70, 0.15);
}

/* Blog Grid Cards in Dark Mode */
html.dark #blog-grid .blog-card {
  background: linear-gradient(135deg, rgba(20, 28, 44, 0.9) 0%, rgba(14, 19, 31, 0.82) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

html.dark #blog-grid .blog-card:hover {
  background: linear-gradient(135deg, rgba(26, 37, 58, 0.96) 0%, rgba(17, 24, 38, 0.9) 100%) !important;
  border-color: rgba(255, 182, 70, 0.5) !important;
  box-shadow: 0 28px 56px -12px rgba(0, 0, 0, 0.8), 0 0 24px rgba(255, 182, 70, 0.22), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
}

html.dark #blog-grid .blog-card h4 a {
  color: #f8fafc !important;
}

html.dark #blog-grid .blog-card:hover h4 a {
  color: #FFB646 !important;
}

html.dark #blog-grid .blog-card p {
  color: #94a3b8 !important;
}

html.dark #blog-grid .blog-card li span.text-black-text-800 {
  color: #cbd5e1 !important;
}

html.dark #blog-grid .blog-card li.before\:bg-black-800::before {
  background-color: #FFB646 !important;
}

html.dark #blog-grid .blog-card div.border-t {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

html.dark #blog-grid .blog-card:hover div.border-t {
  color: #FFB646 !important;
}

/* Single Blog Post Article Page Dark Mode Rules */
html.dark article blockquote {
  background-color: rgba(20, 28, 44, 0.85) !important;
  border-left-color: #FFB646 !important;
  color: #e2e8f0 !important;
}

html.dark article code {
  background-color: rgba(255, 182, 70, 0.12) !important;
  color: #FFB646 !important;
  border: 1px solid rgba(255, 182, 70, 0.25) !important;
}

html.dark .rounded-3xl.bg-black-500 {
  background: linear-gradient(135deg, rgba(20, 28, 44, 0.9) 0%, rgba(14, 19, 31, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark button#copy-link-btn,
html.dark a[title*="Share on"] {
  background-color: rgba(20, 28, 44, 0.9) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark button#copy-link-btn:hover,
html.dark a[title*="Share on"]:hover {
  background-color: #FFB646 !important;
  color: #0b0f17 !important;
  border-color: #FFB646 !important;
}